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>
来源：https://www.cnblogs.com/holly-w/p/7718271.html