1 //time 2017-10-23 2 //by wen 3 ;(function($, window, document, undefined){ 4 5 $.fn.slideshow = function(options){ 6 !options && (options = {}); 7 var settings = $.extend({ 8 autoplay: 500,//是否自动播放,数字则为自动播放的间隔时间 9 delay: 300,//设置滚动事件，动画延长时间 10 loop: true//是否循环播放 11 }, options); 12 return this.each(function(){ 13 // methods.init.call($(this), settings); 14 var $this = $(this), 15 n = 1,//当前图片索引 16 img_width = $this.width(),//图片宽度 17 $thisbanner = $this.find('.banner'), 18 timer = null;//用于自动播放定时器 19 //如果设置为循环轮播 20 if(settings.loop){ 21 //为了从最后一张到第一张和从第一张到最后一张的无缝过渡eg（有图片1、2、3），则：3、1、2、3、1 22 $thisbanner.append($this.find('.banner li').first().clone()); 23 $thisbanner.prepend($this.find(".banner li").eq($this.find(".banner li").length-2).clone()); 24 } 25 26 var new_len = $this.find(".banner li").length;//所有图片加起来总长度 27 28 //点击点 29 $this.find('.dot li').click(function(){ 30 n = settings.loop ? ($(this).index() + 1) : $(this).index(); 31 $thisbanner.animate({ 32 marginLeft: -n*img_width + 'px' 33 }, settings.delay); 34 $(this).addClass('active').siblings().removeClass('active'); 35 36 }); 37 38 //上一屏 39 $this.find('.pre').click(function(){ 40 if(!settings.loop && (n == 0)){ 41 return; 42 } 43 commonfn('l'); 44 }); 45 //下一屏 46 $this.find('.next').click(function(){ 47 if(!settings.loop && (n == new_len-1)){ 48 return; 49 } 50 commonfn('r'); 51 }); 52 53 //滑动公共方法 54 function commonfn(direction){ 55 if($thisbanner.is(':animated')){ //当ul正在执行动画的过程中，阻止执行其它动作。关键之处，不然图片切换显示不完全，到最后图片空白不显示。 56 return; 57 } 58 direction == 'r' ? n++ : n--; 59 $thisbanner.animate({ 60 marginLeft: -n*img_width + 'px' 61 }, settings.delay, function(){ 62 if(settings.loop){ 63 n = (n == 0) ? (new_len-2) : (n == (new_len-1) ? 1 : n); 64 $(this).css('marginLeft', -n*img_width + 'px'); 65 } 66 var index = settings.loop ? n-1 : n; 67 $this.find('.dot li').eq(index).addClass('active').siblings().removeClass('active'); 68 }) 69 } 70 71 //自动播放（autoplay的值需要为正数，并且loop值为true） 72 if(/^d+(?=.{0,1}d+$|$)/.test(settings.autoplay) && settings.loop){ 73 timer = setInterval(function(){ 74 commonfn('r'); 75 }, settings.autoplay); 76 } 77 78 //鼠标移上banner上就停掉轮播，移出鼠标则开始自动轮播 79 $this.hover(function(){ 80 clearInterval(timer); 81 },function(){ 82 timer = setInterval(function(){ 83 commonfn('r'); 84 }, settings.autoplay); 85 }); 86 }); 87 } 88 })(jQuery, window, document)
html模板为：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="renderer" content="webkit|ie-comp|ie-stand"> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <title></title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 ul li { 13 list-style: none; 14 } 15 .slide { 16 position: relative; 17 width: 500px; 18 height: 650px; 19 overflow: hidden; 20 } 21 .slide .banner { 22 width: 2500px; 23 margin-left: -500px; 24 } 25 .slide .banner li { 26 float: left; 27 } 28 .slide .dot { 29 width: 90px; 30 position: absolute; 31 left: 50%; 32 bottom: 20px; 33 margin-left: -40px; 34 z-index: 1; 35 } 36 .slide .dot li { 37 width: 20px; 38 height: 20px; 39 float: left; 40 margin-right: 10px; 41 background: #fff; 42 border-radius: 10px; 43 cursor: pointer; 44 } 45 .dot li.active { 46 background: darkslategray; 47 } 48 .slide .pre, 49 .slide .next { 50 position: absolute; 51 display: block; 52 width: 30px; 53 height: 30px; 54 background: darkred; 55 top: 50%; 56 margin-top: -15px; 57 z-index: 1; 58 } 59 .slide .pre { 60 left: 20px; 61 } 62 .slide .next { 63 right: 20px; 64 } 65 </style> 66 </head> 67 <body> 68 <div class="slide"> 69 <ul class="banner"> 70 <li> 71 <img src="images/carousel1.jpg" alt="" /> 72 </li> 73 <li> 74 <img src="images/carousel2.jpg" alt="" /> 75 </li> 76 <li> 77 <img src="images/carousel3.jpg" alt="" /> 78 </li> 79 </ul> 80 <a class="pre" href="javascript:void(0);"></a> 81 <a class="next" href="javascript:void(0);"></a> 82 <ul class="dot"> 83 <li class="active"></li> 84 <li></li> 85 <li></li> 86 87 </ul> 88 </div> 89 90 <script src="js/jquery-1.8.3.min.js"></script> 91 <script src="js/my_slideshow.js"></script> 92 <script> 93 $(".slide").slideshow(); 94 </script> 95 </body> 96 </html>