如何制作一个无缝轮播图(幻灯片)

   网站上经常见到焦点图动画，焦点图的动画有多种，如：淡入淡出型、上下滑动型、左右滑动型、左右滑动无缝型，对比用户体验的话，无缝轮播方式是最好的，因为在播放多张图片的情况下不会出现间断感，这篇文章用最简单易懂的方式，让你学会独立制作与开发。

核心内容：
1.JavaScript 函数
2.setInterval 定时器
3.jQuery 的 animate 动画
4.jQuery 的 mouseover 及 click 事件
5.无缝概念的理解

1.新建一个ul，width为你所要承载的并列的图片的width，我的为10000px;然后让包含ul的div为图片的宽度，超出的图片为overflow：hidden

slide-1
slide-2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="banner">
      <ul class="banner-img">
        <li ><a href="#"><img src="images/1.jpg"></a></li>
        <li><a href="#"><img src="images/2.jpg"></a></li>
        <li><a href="#"><img src="images/3.jpg"></a></li>
        <li><a href="#"><img src="images/4.jpg"></a></li>
        <li><a href="#"><img src="images/5.jpg"></a></li>
      </ul>
       <ul class="banner-dot">
         <!-- 下面圆点按钮利用js根据图片生成-->
      </ul>
     <!-- 左右按钮 -->
    <div class="btn btn-l">&lt;</div>
    <div class="btn btn-r">&gt;</div>
   </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

*{
    padding: 0;
    margin: 0;
    list-style-type: none;

}
.banner{
    width: 550px;
    height: 300px;
    margin: 100px auto;
    border: 5px solid #000;
    overflow:hidden;
    position: relative;
  
}
.banner .banner-img{
    width: 5000px;
    position: absolute;
    left: 0;
    top: 0;
}
.banner .banner-img li {
    float: left;
}
.banner .banner-dot {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;
    font-size: 0;
    text-align: center;
 }
 .banner .banner-dot li {
    width: 10px;
    height: 10px;
    background: #888;
    border-radius: 50%;
    display: inline-block;
    margin: 0 3px;
    cursor:pointer;
 }
 .banner .banner-dot li.on {
    background: #f60;

 }
 .banner .btn{
    width: 30px;
    height:50px;
    position: absolute;
    top:50%;
    margin-top:-25px;
    background: rgba(0,0,0,0.5); 
    color: white;
    font-size: 40px;
    text-align: center;
    cursor: pointer;
    line-height: 50px;
    display: none;
 }
 .banner:hover .btn{
  display: block;
 }
 .banner  .btn-l{
    left: 0;
 }
 .banner .btn-r{
    right: 0;
 }

2.引入jquery，利用animate实现img左移右移;鼠标滑入时animate暂停，还有如何实现无缝呢，在最后的图片clone第一张图片，接着通过css(肉眼看不见)实现快速跳到第二张实现无缝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

$(function(){
          var i=0;//animate滑动时图片的下标，首张为0;第二张为1,以此类推
          
          var  clone=$('.banner .banner-img li').first().clone();
               
               $('.banner .banner-img').append(clone);
          var  size=$('.banner .banner-img li').size();
              //根据图片动态生成底部圆点
               for (var j = 0;j < size-1; j++) {
                  $('.banner .banner-dot').append('<li></li>')
                }
               $('.banner .banner-dot li').first().addClass('on');
         
      //左边按钮
        $('.btn-l').click(function(){
             moveL();
        })
        //左移函数
        function moveL() {
               i++;
               if (i==size) {
                   $('.banner-img').css({left:0}); //通过css去实现跳到第一张，肉眼看不见
                   i=1; //第二张了
                }
               $('.banner-img').stop().animate({left:-550*i},500);
               //实现圆点和图片的一一对应
               if (i==size-1) {
                 $('.banner .banner-dot li').eq(0).addClass('on').siblings().removeClass('on');
               }else{
                 $('.banner .banner-dot li').eq(i).addClass('on').siblings().removeClass('on');
               }
        }

      //右边按钮
         $('.btn-r').click(function(){
              moveR();
      
        })
         //右移函数
         function moveR() {
                i--;
               if (i==-1) {
                    $('.banner-img').css({left:-(size-1)*550});
                    i=size-2;
               }
               $('.banner-img').stop().animate({left:-550*i},500);
                 $('.banner .banner-dot li').eq(i).addClass('on').siblings().removeClass('on');
              
         }
         //鼠标划入圆点切换
          $('.banner .banner-dot li').hover(function(){
             index=$(this).index();
             i=index;//实现i与index的统一
             $('.banner-img').stop().animate({left:-550*index},500);
             $(this).addClass('on').siblings().removeClass('on');
          })
         

     // // 动画开始
      var time=setInterval(moveL,2000);
      

      //当鼠标划入时停止动画
       $('.banner').hover(function(){
              clearInterval(time);
              
       },function(){
            time=setInterval(moveL,2000);

       })
       
     })

demo地址：http://gdutwyg.github.io//demo/slide.html