jQuery停在最后并返回开始

Question

我是jQuery的新手，我想制作一个滑块。我正在以最简单的形式创建一个无限延续的幻灯片。我是否需要计算<li> s或图像的数量然后获得宽度并将第一个附加到结尾？或者我应该使用某种克隆功能？这是迄今为止的代码。它滚动图像但不是连续的。我猜测需要更多的jQuery。

CSS

*{margin:0;padding:0;}
#wrap{
    margin:50px auto;
    position: relative;
    width:400px;
    height:400px;
    overflow: hidden;
}
ul{ width:1600px;
    position:absolute;
    left:0px;}

li{float:left;}

HTML

<div id="wrap">
   <span class="prev">PREV</span>
   <span class="next">NEXT</span>
   <ul>
      <li><img src="1.jpg" alt="image1"></li>
      <li><img src="2.jpg" alt="image2"></li>
      <li><img src="3.jpg" alt="image3"></li>
      <li><img src="4.jpg" alt="image4"></li>
   </ul>
</div>

jQuery

$('.next').on('click', function () {$('ul').animate({left: '-=400'})});
$('.prev').on('click', function () {$('ul').animate({left: '+=400'})});

Answer 1

您的代码是 waaaaaaaaaay ，以简化您想要做的事情。它不是stackoverflow的最佳选择，因为我们必须编写太多的代码，更改代码会很麻烦和笨拙。您可能希望在网络上看到一些教程，只需谷歌。