图片轮播点击轮播(二)
自定义点击左右滚动
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 }