<!doctype html><html><head><meta charset="utf-8"><title>无缝滚动</title><script language="javascript" src="js/jquery-1.8.1.min.js"></script><script type="text/javascript"> var i=0; var first=$(".img li").first().clone(); $(".img").append(first); //点左边按钮 $(".move li:nth-of-type(1)").click(function(){ i++; if(i==5){ $(".img").css({left:'0px'}); i=1; } $(".img").animate({left:-i*920+'px'}); if(i==4){ $(".num li").eq(0).addClass('on').siblings().removeClass('on'); }else{ $(".num li").eq(i).addClass('on').siblings().removeClass('on'); } }); //点右边按钮 $(".move li:nth-of-type(2)").click(function(){ i--; if(i==-1){ $(".img").css({left:-4*920+'px'}); i=3; } $(".img").animate({left:-i*920+'px'}); $(".num li").eq(i).addClass('on').siblings().removeClass('on'); }); //自动轮播 var timer=setInterval(function(){ i++; if(i==5){ $(".img").css({left:'0px'}); i=1; } $(".img").animate({left:-i*920+'px'}); if(i==4){ $(".num li").eq(0).addClass('on').siblings().removeClass('on'); }else{ $(".num li").eq(i).addClass('on').siblings().removeClass('on'); } },2000); //鼠标划上事件 $(".screen").mouseover(function(){ clearInterval(timer); }); $(".screen").mouseout(function(){ setInterval(timer); }); //点击事件 $(".num li").mouseover(function(){ var index=$(this).index(); i=$(this).index $(".img").animate({left:-i*920+'px'}); $(".num li").eq(i).addClass('on').siblings().removeClass('on'); }) </script><style type="text/css"> *{margin: 0px; padding: 0px;list-style: none} .screen{width: 920px;height: 620px;margin: 50px auto 0px;overflow: hidden; position: relative} .screen:hover .move{display: block;} .img{width: 500%;position: absolute; left: 0px} .img li{float: left;} .num{position: absolute;bottom: 10px;width: 120px; height: 15px;text-align: center;} .num li{width: 15px;height: 15px;display: inline-block;border-radius: 50px; background-color: orange;} .num li.on{background-color: lightgreen;} .move{width: 30px;height: 50px;line-height: 50px;display: none;} .move li{width: 30px;height: 50px;font-size: 30px;color: #fff;background: rgba(0,0,0,.6);position: absolute;top: 40%;text-align: center} .move li:nth-of-type(2){right: 0px;} </style></head><body><div class="screen"> <ul class="img"> <li><img src="img/1fff6db2b2.jpg"/></li> <li><img src="img/2e4c8b8b54.jpg"/></li> <li><img src="img/36d3d58bbd.jpg"/></li> <li><img src="img/8faa824035.jpg"/></li> </ul> <ul class="num"> <li class="on"></li> <li></li> <li></li> <li></li> </ul> <ul class="move"> <li><</li> <li>></li> </ul></div></body></html>
1 回答
- 1 回答
- 1 关注
- 1509 浏览
添加回答
举报
0/150
提交
取消