<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点图展示</title>
<style>
* {
padding: 0;
margin: 0;
border: none;
list-style: none;
}
.box{
width:100%;
height: 340px;
position: relative;
overflow: hidden;
}
.box ul{
position: relative;
width:500%;
height: 340px;
}
.box ul li{
float: left;
width:20%;
height:100%;
z-index: 1;
}
li img{
width:100%;
height:100%;
}
span{
width: 50px;
height: 50px;
font-size:180px;
position: absolute;
color: white;
z-index: 4;
}
span:nth-of-type(1){
left: 50px;
}
span:nth-of-type(2){
right: 100px;
}
</style>
</head>
<body>
<div class="box">
<span><</span>
<span>></span>
<ul>
<li><img src="images/01.png" alt=""></li>
<li><img src="images/02.png" alt=""></li>
<li><img src="images/03.png" alt=""></li>
<li><img src="images/04.png" alt=""></li>
<li><img src="images/01.png" alt=""></li>
</ul>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script>
$(function (){
function moveL(){
$("ul").stop().animate({
left:"-="+parseInt($(".box").width())+"px"
});
if($("ul").position().left<=-4*$(".box").width()){
$("ul").css("left",0);
}
}
function moveR(){
$("ul").animate({
left:"+=1000px"
})
}
var timer = setInterval(moveL,1000);
})
</script>
</body>
</html>
代码是这些,问题很奇怪,当轮播到临界值的时候,css赋值left为0的时候会失败,通过输出left的值确实为0,可是图片竟然不会回到原位,如果把浏览器切换一下,就是最小化个1秒后打开就可以了,很莫名其妙,有大神懂吗
http://www.jb51.net/article/94479.htm
function moveL() {
console.log($(".box").width(), $("ul").position().left, -4 * $(".box").width())
$("ul").stop().animate({
left: "-=" + parseInt($(".box").width()) + "px"
}, function () {
//////////////重置的代码放到回掉里面，要不你这个代码执行的同时，上面的动画还在继续，导致0设置成功后动画继续更改了这个值为其他的
if ($("ul").position().left <= -5 * $(".box").width()) {
$("ul").css("left", 0);
}
});
}