jQuery图片轮播

1.很多时候使用方法ul列表去展示。当然这也有一些好处，比如float对齐之类的。当然直接用p或者div也行。

2.了解overflow属性。在溢出情况下的处理。其实轮播就是在不断的处理ul溢出的情况。

3 jQuery animate的动画效果。当然如果不用这个也行。一个setInterval就能搞定它。不过jQuery还是做了一些封装。

4 可能还需要一些基础的理解就是对定位的熟悉。margin和postion的了解。

5 之后就是循环轮播了，循环轮播需要对节点进行重新的修改。

   具体而言就是在轮播到最后一张图片的时候，修改节点，将第一个节点，添加到列表的最后一个位置。

<div class="slide">
    <ul>
        <li><img src="images/slide01.jpg"></li>
        <li><img src="images/slide02.jpg"></li>
        <li><img src="images/slide03.jpg"></li>
    </ul>
    <ol>
        <li class="on">1</li><li>2</li><li>3</li>
    </ol>
    <div class="prev btn">上一页</div>
    <div class="next btn">下一页</div>
</div>            

*{margin:0; padding:0;}
ul,ol{list-style:none;}
.slide{ width:100%; height: 382px; overflow: hidden; margin:20px auto 0; position:relative;}
.slide ul{ position:absolute; left:0; top:0; overflow: hidden;}
.slide ul li{ float:left; width:1920px; height: 500px;}
.slide ol{position:absolute; left:50%; bottom:20px; margin-left:-60px;}
.slide ol li{ float:left; width:34px; height: 8px; margin:0 5px; background:#c1c1c1; display:inline; text-indent:-999em;}
.slide ol li.on{ background: #48e574;}
.slide .btn{ display: block; width:80px; height: 40px; text-align:center; line-height:40px; background: #666; color: #fff; top:50%; margin-top: -20px; cursor: pointer;position: absolute;}
.slide .prev{ left:0;}
.slide .next{ right:0;}

$(function(){
 2　　$('.slide ul li:first').clone().appendTo($('.slide ul'));//复制第一个li
  　　var left,t,index= 0,
     len = $('.slide ul li').length,//图片数量
     liW = $('.slide ul li').width(),//获取图片的宽度
     ulW = liW*len;//获取UL的宽度
     $('.slide ul').width(ulW);

     function moving(){
     　　left = index*liW;
        if(index >= len-1){
        　　$('.slide ul').stop().animate({'left':-left},500,function(){
           　　index=0;
              $('.slide ul').css('left',0);
              $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
         　});
         }else{
         　　$('.slide ul').stop().animate({'left':-left},500);
            $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
         };
         　　console.log(index);
         };
         //下一图
         $('.slide .next').click(function(){
         index++;
         if(index > len){
         　　index=1;
         　　$('.slide ul').css('left',0).stop().animate({'left':-index*liW},500);
         }else{
         　　moving();
         }
         　　$('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
         });

          //上一图
          $('.slide .prev').click(function(){
          　　index--;
             if(index<1){
             　　if(index<0){
                　　index = len-2;
                   $('.slide ul').css('left',-(len-1)*liW).stop().animate({'left':-(len-2)*liW},500);
                }else{
                　　left = index*liW;
                   $('.slide ul').stop().animate({'left':-left},500,function(){
                   　　index=len-1;
                      $('.slide ul').css('left',-index*liW);
                  　});
                 }
                    $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
                }else{
                    moving();
                };
            });

            //自动轮播
            function automatic(){
                index++;
                moving();
            };
            $('.slide').hover(function(){
                clearInterval(t);
            },function(){
                t =setInterval(automatic,3000);
            }).trigger('mouseleave');
        });