jquery技术实现纵向轮播图

以下是使用jQuery实现纵向轮播图的代码：

HTML代码：

<div class="slider">
  <ul class="img_left">
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/2.jpg" alt=""></li>
    <li><img src="img/3.jpg" alt=""></li>
    <li><img src="img/4.jpg" alt=""></li>
  </ul>
  <ul class="right_text">
    <li class="currentStyle">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

CSS代码：

.slider {
  width: 500px;
  height: 300px;
  overflow: hidden;
  position: relative;
}
.img_left {
  position: absolute;
  top: 0;
  left: 0;
  width: 500px;
  height: 1200px;
  margin: 0;
  padding: 0;
}
.img_left li {
  list-style: none;
  width: 500px;
  height: 300px;
  display: none;
}
.img_left li:first-child {
  display: block;
}
.right_text {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 300px;
  margin: 0;
  padding: 0;
}
.right_text li {
  list-style: none;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: #ccc;
  margin-bottom: 10px;
  cursor: pointer;
}
.right_text li.currentStyle {
  background-color: #f00;
}

JavaScript代码：

$(document).ready(function() {
  var index = 0;
  var timer = null;
  // 鼠标悬停在数字上时
  $(".right_text li").mouseover(function() {
    clearInterval(timer);
    index = $(this).index();
    $(this).addClass("currentStyle").siblings().removeClass("currentStyle");
    $(".img_left li").eq(index).fadeIn().siblings().fadeOut();
  });
  // 鼠标离开时
  $(".slider").mouseout(function() {
    timer = setInterval(function() {
      index++;
      if (index > 3) {
        index = 0;
      }
      $(".right_text li").eq(index).addClass("currentStyle").siblings().removeClass("currentStyle");
      $(".img_left li").eq(index).fadeIn().siblings().fadeOut();
    }, 2000);
  }).trigger("mouseout");
});