java 图片轮播_[Java教程]jQuery图片轮播

[Java教程]jQuery图片轮播

0 2016-05-03 11:00:17

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

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

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

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

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

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

2

• 3
• 4
• 5
• 6

7

1. 8
2. 1
3. 2
4. 3 9

10

上一页

11

下一页

12

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

本文网址：http://www.shaoqun.com/a/218295.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

jquery

0