网页常用动态效果--优酷轮播图
优酷轮播图的不同之处在于用克隆在最后插入新的节点图片,因而在轮播时角标位的判断是关键
HTML代码:
<div class="box"> <ul> <li><img src="image/youku/1.jpg" height="410" width="1190" alt=""/></li> <li><img src="image/youku/2.jpg" alt=""/></li> <li><img src="image/youku/3.jpg" alt=""/></li> <li><img src="image/youku/4.jpg" alt=""/></li> <li><img src="image/youku/5.jpg" alt=""/></li> <li><img src="image/youku/6.jpg" alt=""/></li> </ul> <ol> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> <span class="left"></span> <span class="right"></span> </div>
CSS代码:
.box{ width: 1190px; height: 410px; margin:20px auto; overflow: hidden; position: relative; } .box ul{ position: absolute; left: 0; top: 0; } .box ul li{ float: left; width: 1190px; height: 410px; } .box ol{ position: absolute; text-align: center; bottom: 10px; width: 100%; font-size:0; } .box ol li{ width: 10px; height: 10px; background: #fff; border-radius:50%; border:2px solid #ccc; display:inline-block; margin:0 2px; cursor: pointer; } .box ol .current{ background: lightskyblue; border:2px solid #fff; } .box span{ width: 45px; height: 45px; position: absolute; top:50%; margin-top:-22px; background: pink; cursor: pointer; } .box .left{ background: url(image/youku/left.png) 0 0 no-repeat; left:10px; } .box .right{ background: url(image/youku/right.png) 0 0 no-repeat; right: 10px; }
<script> $(function () { //克隆第一张,放入最后 var tag = $('.box ul li:first').clone(); $('.box ul').append(tag); //设定ul的宽为所有li的宽之和 var w = $('.box ul li').width(); var lis = $('.box ul li').length; $('.box ul').width(w*lis); //定义定时器和累加器变量 var num = 0; var timer = null; //点击角标事件 $('.box ol li').click(function () { var index = $(this).index(); $('.box ul').stop().animate({left:-index*w},500); $(this).addClass('current').stop().siblings().removeClass('current'); num = index; }); //右点击事件 $('.box .right').click(function () { autoplay(); }); //左点击事件 $('.box .left').click(function () { prevplay(); }); //自动播放 function autoplay(){ num++; if(num>lis-1){ //播放到最后一张(--克隆的那一张时) num = 1; //下一次播放从第二张开始,因而角标为1 } $('.box ul').stop().animate({left:-num*w},500); $('.box ol li').eq(num).addClass('current').stop().siblings().removeClass('current'); if(num==lis-1){ $('.box ol li').eq(0).addClass('current').stop().siblings().removeClass('current');//ol下面的li的仍从0开始 }; }; function prevplay(){ num--; if(num < 0){ //如果点击第一张,那么克隆最后一张的前一张才是真正的最后一张,角标是lis-1 num = lis-2; } $('.box ul').stop().animate({left:-num*w},500); $('.box ol li').eq(num).addClass('current').stop().siblings().removeClass('current'); if(num==lis-1){ //在角标是最后一个时,实际是克隆的第一张,下面的ol应该从0开始 $('.box ol li').eq(0).addClass('current').stop().siblings().removeClass('current'); }; } timer = setInterval(autoplay,2000); $('.box').hover(function () { clearInterval(timer); }, function () { timer = setInterval(autoplay,2000); }) }); </script>