jQuery圖片輪播

1.不少時候使用方法ul列表去展現。固然這也有一些好處，好比float對齊之類的。固然直接用p或者div也行。

2.瞭解overflow屬性。在溢出狀況下的處理。其實輪播就是在不斷的處理ul溢出的狀況。

3 jQuery animate的動畫效果。固然若是不用這個也行。一個setInterval就能搞定它。不過jQuery仍是作了一些封裝。

4 可能還須要一些基礎的理解就是對定位的熟悉。margin和postion的瞭解。

5 以後就是循環輪播了，循環輪播須要對節點進行從新的修改。

   具體而言就是在輪播到最後一張圖片的時候，修改節點，將第一個節點，添加到列表的最後一個位置。

 1 <div class="slide">
 2     <ul>
 3         <li><img src="images/slide01.jpg"></li>
 4         <li><img src="images/slide02.jpg"></li>
 5         <li><img src="images/slide03.jpg"></li>
 6     </ul>
 7     <ol>
 8         <li class="on">1</li><li>2</li><li>3</li>
 9     </ol>
10     <div class="prev btn">上一頁</div>
11     <div class="next btn">下一頁</div>
12 </div>            

 

 1 *{margin:0; padding:0;}
 2 ul,ol{list-style:none;}
 3 .slide{ width:100%; height: 382px; overflow: hidden; margin:20px auto 0; position:relative;}
 4.slide ul{ position:absolute; left:0; top:0; overflow: hidden;}
 5.slide ul li{ float:left; width:1920px; height: 500px;}
 6.slide ol{position:absolute; left:50%; bottom:20px; margin-left:-60px;}
 7.slide ol li{ float:left; width:34px; height: 8px; margin:0 5px; background:#c1c1c1; display:inline; text-indent:-999em;}
 8.slide ol li.on{ background: #48e574;}
 9.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;}
10.slide .prev{ left:0;}
11.slide .next{ right:0;}

 

 1 $(function(){
 2　　$('.slide ul li:first').clone().appendTo($('.slide ul'));//複製第一個li
 3   　　var left,t,index= 0,
 4      len = $('.slide ul li').length,//圖片數量
 5      liW = $('.slide ul li').width(),//獲取圖片的寬度
 6      ulW = liW*len;//獲取UL的寬度
 7      $('.slide ul').width(ulW);
 8 
 9      function moving(){
10      　　left = index*liW;
11         if(index >= len-1){
12         　　$('.slide ul').stop().animate({'left':-left},500,function(){
13            　　index=0;
14               $('.slide ul').css('left',0);
15               $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
16          　});
17          }else{
18          　　$('.slide ul').stop().animate({'left':-left},500);
19             $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
20          };
21          　　console.log(index);
22          };
23          //下一圖
24          $('.slide .next').click(function(){
25          index++;
26          if(index > len){
27          　　index=1;
28          　　$('.slide ul').css('left',0).stop().animate({'left':-index*liW},500);
29          }else{
30          　　moving();
31          }
32          　　$('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
33          });
34 
35           //上一圖
36           $('.slide .prev').click(function(){
37           　　index--;
38              if(index<1){
39              　　if(index<0){
40                 　　index = len-2;
41                    $('.slide ul').css('left',-(len-1)*liW).stop().animate({'left':-(len-2)*liW},500);
42                 }else{
43                 　　left = index*liW;
44                    $('.slide ul').stop().animate({'left':-left},500,function(){
45                    　　index=len-1;
46                       $('.slide ul').css('left',-index*liW);
47                   　});
48                  }
49                     $('.slide ol li').eq(index).addClass('on').siblings().removeClass('on');
50                 }else{
51                     moving();
52                 };
53             });
54 
55             //自動輪播
56             function automatic(){
57                 index++;
58                 moving();
59             };
60             $('.slide').hover(function(){
61                 clearInterval(t);
62             },function(){
63                 t =setInterval(automatic,3000);
64             }).trigger('mouseleave');
65         });