jquery轮播图最后一张图片如何无缝轮播到第一张图片？（轮播顺序应和前面一样，即从左往右）,代码如下：
这个代码的问题是最后一张图与第一张图切换的顺序从右往左，用户体验不好。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitiona...
这个代码的问题是最后一张图与第一张图切换的顺序从右往左，用户体验不好。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>opp手机官网3</title>
<style>
*{margin:0; padding:0;}
li{list-style:none;}
img{border:none;}
a{color:#FFF; text-decoration:none;}
.pic{width:1920px; height:630px; position:relative; overflow:hidden;}
.pic ul{/*width:5760px;*/ position:absolute; left:0; border:1px solid #000;}
.pic ul li{float:left;}
.pic li img{ position:relative;}
.pic .Tab{width:100%; text-align:center;position:absolute; bottom:5px;}
.pic .Tab a.active{color:#F30;}
</style>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
var timer=null;
var oUl=$(".pic ul");
var aLi=$(".pic ul li");
var aImg=$(".pic ul li img");
var imgWidth=1920;
oUl.css("width",imgWidth * aImg.length + 'px');
var i=0;
timer=setInterval(function(){
i++;
if(i==aImg.length){
i=0;
}
oUl.animate({"left":"-"+imgWidth*i + 'px'},500);
},2000);
});
</script>
</head>
<body>
<div class="pic" id="pic">
<ul>
<li>
<img src="images/bg1.jpg">
</li>
<li>
<img src="images/bg2.jpg">
</li>
<li>
<img src="images/bg3.jpg">
</li>
</ul>
</div>
</body>
</html> 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>opp手机官网3</title>
<style>
*{margin:0; padding:0;}
li{list-style:none;}
img{border:none;}
a{color:#FFF; text-decoration:none;}
.pic{width:1920px; height:630px; position:relative; overflow:hidden;}
.pic ul{/*width:5760px;*/ position:absolute; left:0; border:1px solid #000;}
.pic ul li{float:left;}
.pic li img{ position:relative;}
.pic .Tab{width:100%; text-align:center;position:absolute; bottom:5px;}
.pic .Tab a.active{color:#F30;}
</style>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
var timer=null;
var oUl=$(".pic ul");
var aLi=$(".pic ul li");
var aImg=$(".pic ul li img");
var imgWidth=1920;
oUl.css("width",imgWidth * aImg.length + 'px');
var i=0;
timer=setInterval(function(){
i++;
if(i==aImg.length){
i=0;
}
oUl.animate({"left":"-"+imgWidth*i + 'px'},500);
},2000);
});
</script>
</head>
<body>
<div class="pic" id="pic">
<ul>
<li>
<img src="images/bg1.jpg">
</li>
<li>
<img src="images/bg2.jpg">
</li>
<li>
<img src="images/bg3.jpg">
</li>
</ul>
</div>
</body>
</html> 展开
1个回答
展开全部
$(document).ready(function() {
var timer = null;
var pic = $(".pic");
var oUl = pic.children("ul");
var aImg = pic.find("img");
var imgWidth = parseFloat(pic.css("width")) || pic.prop("offsetWidth");
oUl.css("width", imgWidth * aImg.length + 'px');
var i = 0;
timer = setInterval(function() {
oUl.animate({
"left": "-" + imgWidth + 'px'
}, 500, function(){
oUl.children("li:first").insertAfter(oUl.children("li:last"));
oUl.css("left", 0);
});
}, 1000);
});追问
谢谢 好像可以了 但是能不能再麻烦您帮忙注释一下
追答
没有必要注释吧，就是几句，看api就了解了，采纳即可
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
