一个滚动轮播的问题，存在bug
<!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>
因为做的是个宽度自适应的轮播，
现在问题是每次轮播到最后一张图片，与第一张图片的衔接没有动画效果
展开
收起
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
