图片轮播点击轮播（二）

自定义点击左右滚动

---

 

HTML部分

<div id="img-slider">
 <button id="prev"><img src="image/left.jpg" width="100%"/></button>
 <div class="slider-wrap">
  <ul>
   <li><a href="#"><img src="image/1.jpg" width="100"/></a></li>
   <li><a href="#"><img src="image/2.jpg" width="100"/></a></li>
   <li><a href="#"><img src="image/3.jpg" width="100"/></a></li>
   <li><a href="#"><img src="image/4.jpg" width="100"/></a></li>
   <li><a href="#"><img src="image/5.jpg" width="100"/></a></li>
   <li><a href="#"><img src="image/6.jpg" width="100"/></a></li>
  </ul>
 </div>
 <button id="next"><img src="image/right.jpg" width="100%"/></button>
</div>

javascript部分

$(function () {
  $("#img-slider").imgScroll();
  $("#img-slider-2").imgScroll();
  
});
  
(function ($) {
  $.fn.imgScroll = function () {
    var isDone = false,
      scrollBox = $(this),
      prevBtn = scrollBox.find("#prev"),
      nextBtn = scrollBox.find("#next"),
      imgBox = scrollBox.find("ul"),
      next_over = imgBox.find("li").width() * imgBox.find("li").length,
      slide_width = $(".slider-wrap li").width();
            
    return this.each(function(){
      function setOpacity() {
        imgBox.animate({
          opacity: 1
        }, 500,function(){
          isDone = false;
          
        })
      }
      function scrollNext() {
        if(!isDone && next_over + parseInt(imgBox.css("left"),10) > slide_width*4){
          isDone = true;
          imgBox.animate({
            left: "+=" + "-" + slide_width,
            opacity: 0.5
          }, 500, setOpacity);
        }
        
      }
      function scrollPrev() {
        if(!imgBox.is(':animated') && parseInt(imgBox.css("left"),10) !=0){
          imgBox.animate({
            left: "+=" + slide_width,//左移
            opacity: 0.5
          }, 500, setOpacity);
      
        }
      }
      prevBtn.bind('click', scrollPrev); //向前滚动
      nextBtn.bind('click', scrollNext); //向后滚动
        
        
    })
 }
})(jQuery);

css部分

#img-slider, #img-slider-2 {
  position: relative;
  width: 560px;
  height: 80px;
}
.slider-wrap {
  width: 480px;
  overflow: hidden;
  position: relative;
  height: 150px;
  margin-left: 40px;
}
.slider-wrap ul {
  zoom: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 9999px;
}
.slider-wrap ul li {
  float: left;
  width: 120px;
  text-align: center;
  padding: 5px 0;
}
#prev, #next {
  position: absolute;
  top: 30px;
  left: 0px;
  width: 40px;
  cursor: pointer;
}
#next {
  left: auto;
  right: 0px
}