javascript - 一个滚动轮播的问题，存在bug-PHP中文网问答

<!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>
<p class="main rel">
  <p 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>
  </p>
  <img class="Left abst" src="images/right.png"/>
  <img class="Right abst" src="images/left.png">
</p>
<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>

图片奉上：

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

<!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; min-height:1000px;} .pic ul li{ position:absolute; left:0; width:100%; top:0; display:none;} .pic ul li.current{ position:static; display:block;} .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> <p class="main rel"> <p 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> </p> <img class="Left abst" src="images/right.png"/> <img class="Right abst" src="images/left.png"> </p> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.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); // }); var allItems = $(".pic ul li"); var itemCount = allItems.length; //鼠标点击左右箭头切换 function turnRight(){ var item = $('.current'); var currentIndex = allItems.index(item); currentIndex++; currentIndex = currentIndex>= itemCount? 0: currentIndex; var next = allItems.eq(currentIndex); allItems.css('z-index','0').hide(); item.show().css({'left':'0', 'z-index': currentIndex+1}); item.removeClass('current').stop().animate({left:"-100%"},3000); next.show().css({'left':'0', 'z-index': currentIndex+2}).addClass('current'); // d++; // if(d>2){d=0}; // $(".pic ul li").removeClass("current").eq(z).stop().animate({left:"-100%"},1000); // $(".pic ul li").eq(d).css("left","100%"); // $(".pic ul li").eq(d).stop().animate({left:"0"},1000).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>