自己做的jQuery轮播图，大家帮忙看一下，能自动轮播，定时器，点击按钮不起用

<!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>

qq_嘿挪威柑橘_0

浏览 1510回答 1

1回答

随时随地看视频慕课网APP