jquery左右切换的无缝滚动轮播图
1.HTML结构：
<head>
<script type="text/javascript" src="../jquery-1.8.3/jquery.js"></script>
</head>
<body>
<div class="banner">
<ul class="img">
<li><a href=""><img src="img/01.jpg" alt="1"></a>
<li><a href=""><img src="img/02.jpg" alt="2"></a>
<li><a href=""><img src="img/03.jpg" alt="3"></a>
<li><a href=""><img src="img/04.jpg" alt="4"></a>
</ul>
<ul class="num"></ul>
<div class="btn btn_left"><</div>
<div class="btn btn_right">></div>
</div>
</body>
2.css样式：
1 *{margin:0;padding: 0;list-style: none;} 2 .banner{margin:100px auto;border:5px solid #000;width:690px;height:690px;overflow: hidden; 3 position:relative;} 4 .banner .img{width:5000px;position: absolute;left:0;top:0;} 5 .banner .img li{float:left;} 6 .banner .num{position: absolute;width:100%;bottom:10px;left:0;font-size:0;text-align: center;} 7 .banner .num li{width:10px;height:10px;background-color:#888;border-radius: 50%; 8 display: inline-block;margin:0px 3px;cursor: pointer;} 9 .banner .num li.on{background-color:#f60;} 10 11 .banner .btn{width:50px;height:60px;background:rgba(0,0,0,0.5);position:absolute;top:50%;margin-top:-25px; 12 font-size:40px;line-height:50px;text-align: center;color:#fff;font-family: "宋体";} 13 .banner .btn_left{left:0;} 14 .banner .btn_right{right:0;}
3.jQuery结构：
1 $(function(){ 3 var i=0; 4 //将第一张复制 5 var clone=$(".banner .img li").first().clone(); 6 //然后粘贴 7 $(".banner .img").append(clone); 8 //size()被length取代 9 var size=$(".banner .img li").length; 10 for(var j=0;j<size-1;j++){ 11 $(".banner .num").append("<li></li>"); 12 } 13 $(".banner .num li").first().addClass("on"); 14 //鼠标划入圆点 15 $(".banner .num li").hover(function(){ 16 //获取当前元素的索引值 17 var index=$(this).index(); 18 i=index; 19 $(".banner .img").stop().animate({left:-index*690},500) 20 $(this).addClass("on").siblings().removeClass("on"); 21 }) 22 //自动轮播 23 var t=setInterval( 24 moverl,2000) 25 //鼠标移入定时器被关闭 26 $(".banner").hover(function(){ 27 clearInterval(t); 28 },function(){ 29 t=setInterval(moverl,2000) 30 }) 31 //向左的按钮点击事件 32 $(".banner .btn_left").click(function(){ 33 moverl(); 34 }) 35 //封装函数 36 function moverl(){ 37 i++; 38 if(i==size){ 39 $(".banner .img").css({left:0}); 40 i=1; 41 } 42 $(".banner .img").stop().animate({left:-i*690},500) 43 if(i==size-1){ 44 $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on"); 45 }else{ 46 $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on"); 47 } 48 49 50 51 } 52 53 $(".banner .btn_right").click(function(){ 54 moverr(); 55 }) 56 function moverr(){ 57 i--; 58 if(i==-1){ 59 //索引从0开始 60 $(".banner .img").css({left:-(size-1)*690}); 61 i=size-2; 62 } 63 $(".banner .img").stop().animate({left:-i*690},500) 64 $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on"); 65 } 66 })
