开发者社区> 问答> 正文

一个滚动轮播的问题,存在bug

杨冬芳 2016-06-13 13:24:19 1064
<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>banner</title>
</head>
<style>
*{padding:0; margin:0; list-style:none;}
.main{ width:100%;}
.pic{ width:100%; overflow:hidden; position:relative;}
.pic ul li{ position:absolute; left:100%; width:100%;}
.pic ul li.current{ position:static;}
.pic ul li img{ width:100%;}
.abs{ position:absolute;}
.rel{ position:relative;}
.Right{position:absolute;right:0px; top:50%; margin-top:-20px; width:26px; height:40px; cursor:pointer;}
.Left{position:absolute;left:0px; top:50%; margin-top:-20px; width:26px; height:40px; cursor:pointer;}
</style>

<body>
<div class="main rel">
  <div class="pic">
    <ul>
      <li class="current"><img src="images/a-0.jpg"/></li>
      <li><img src="images/a-1.jpg"/></li>
      <li><img src="images/a-2.jpg"/></li>
    </ul>
  </div>
  <img class="Left abst" src="images/right.png"/>
  <img class="Right abst" src="images/left.png">
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var d=0;//当前点下标
var z=0;//之前点下标
var timer=null;//存放定时函数

$(".abst").hover(function(){
    clearInterval(timer);
},function(){
    timer=setInterval("turnRight()",3000);
});

//鼠标点击左右箭头切换
function turnRight(){
    d++;
    if(d>2){d=0};
    $(".pic ul li").removeClass("current").eq(z).stop().animate({left:"-100%"},300);
    $(".pic ul li").eq(d).css("left","100%");
    $(".pic ul li").eq(d).stop().animate({left:"0"},300).addClass("current");
    z=d;
    console.log(d+"+"+z)
};
function turnLeft(){
    d--;
    if(d<0){d=2};
    $(".pic ul li").removeClass("current").eq(z).stop().animate({left:"100%"},300);
    $(".pic ul li").eq(d).css("left","-100%");
    $(".pic ul li").eq(d).stop().animate({left:"0"},300).addClass("current");
    z=d;
    console.log(d+"+"+z)
};
$(".Left").click(function(){
    turnLeft();
});
$(".Right").click(function(){
    turnRight();
});
timer=setInterval("turnRight()",3000);
</script>
</body>
</html>

screenshot
screenshot
screenshot
因为做的是个宽度自适应的轮播,
现在问题是每次轮播到最后一张图片,与第一张图片的衔接没有动画效果

前端开发 JavaScript
分享到
取消 提交回答
全部回答(0)

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程