Slide Navi

by hokuto kato

HTML

<div id="slide">
  <ul id="slideList">
    <li>
      <a href="http://google.com"><img src="http://placehold.jp/D64550/F3C7CA/710x230.png?text=main img" alt=""></a>
    </li>
    <li>
      <a href="http://google.com"><img src="http://placehold.jp/DAEFB3/424836/710x230.png?text=main img" alt=""></a>
    </li>
    <li>
      <a href="http://google.com"><img src="http://placehold.jp/272727/BDBDBD/710x230.png?text=main img" alt=""></a>
    </li>
    <li>
      <a href="http://google.com"><img src="http://placehold.jp/01BAEF/003848/710x230.png?text=main img" alt=""></a>
    </li>

  </ul>
</div>
<div id="navi">
  <ul id="naviList">
    <li>
      <a href="http://google.com"><img src="http://placehold.jp/D64550/F3C7CA/170x60.png?text=navi" alt=""></a>
    </li>
    <li>
      <a href="http://google.com"><img src="http://placehold.jp/DAEFB3/424836/170x60.png?text=navi" alt=""></a>
    </li>
    <li>
      <a href="http://google.com"><img src="http://placehold.jp/272727/BDBDBD/170x60.png?text=navi" alt=""></a>
    </li>
    <li>
      <a href="http://google.com"><img src="http://placehold.jp/01BAEF/003848/170x60.png?text=navi" alt=""></a>
    </li>
  </ul>
</div>

CSS

img{
  vertical-align: top;
}
#slide,#navi{
  display: none;
  overflow: hidden;
  width: 710px;
}
#slideList, #naviList {
  margin: 0;
  padding: 0;
}
#slideList li, #naviList li {
  list-style-type: none;
  margin: 0;
}
#slideList li:hover, #naviList li:hover{
  opacity:0.8;
}
#slideList li img, #naviList li img{
  border-radius: 5px;
}
#slideList {
  position: relative;
  width: 710px;
  height: 230px;
  margin-bottom: 10px;
}
#slideList li{
  position: absolute;
  display: none;
}
#naviList{
  overflow: hidden;
  zoom:1;
}
#naviList li{
  float: left;
}
#naviList li + li{
  margin-left: 10px;
}

JavaScript

$(function() {
  startTimer();
  current = 0;
  slideListWidth = $('#slideList').width();
  slideListLength = $('#slideList li').length;
  slideLastLength = slideListLength - 1;

  $('#slideList li').first().show();

  //hover
  $('#naviList li').hover(function() {
    var naviListIndex = $(this).index();
    if (current < naviListIndex) {

      if ($('#slideList').is(':animated')) {

        $('#slideList li').eq(naviListIndex).show().css('left', slideListWidth);
        $('#slideList').stop(true, true).animate({
          left: -slideListWidth
        }, 'fast', function() {
          $('#slideList li').eq(naviListIndex).css('left', 0);
          $('#slideList').css('left', 0);
          $('#slideList li').eq(naviListIndex).prevAll('li').hide();
          current = naviListIndex;
        });

      } else {

        $('#slideList li').eq(naviListIndex).show().css('left', slideListWidth);
        $('#slideList').stop(true, true).animate({
          left: -slideListWidth
        }, 'fast', function() {
          $('#slideList li').eq(naviListIndex).css('left', 0);
          $('#slideList').css('left', 0);
          $('#slideList li').eq(naviListIndex).prevAll('li').hide();
          current = naviListIndex;
        });

      }

    } else if (current > naviListIndex) {

      if ($('#slideList').is(':animated')) {

        $('#slideList li').eq(naviListIndex).show().css('left', -slideListWidth);
        $('#slideList').stop(true, true).animate({
          left: slideListWidth
        }, 'fast', function() {
          $('#slideList li').eq(naviListIndex).css('left', 0);
          $('#slideList').css('left', 0);
          $('#slideList li').eq(naviListIndex).nextAll('li').hide();
          current = naviListIndex;
        });

      } else {

        $('#slideList li').eq(naviListIndex).show().css('left', -slideListWidth);
        $('#slideList').stop(true, true).animate({
          left: slideListWidth
        }, 'fast', function() {
          $('#slideList...