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 });