Javascript 如何制作循环图像幻灯片？

如何制作循环图像滑块？ 下面是我的图像幻灯片放映代码。我想使幻灯片放映循环，即当最后一个图像出现时，单击“下一步”按钮，第一个图像应再次出现。 我的JS是这样的

function worksCarousel(){
var totalWorks = $(".wrapper-project ul li").length;
var ampleWork = $(".project-content").width();
var ampleTotalWorks = totalWorks*ampleWork;
$('.wrapper-project ul').css('width',ampleTotalWorks)

var fragment = document.createDocumentFragment(), 
li = document.createElement('li');
while (totalWorks--) {
    fragment.appendChild(li.cloneNode(true));
}

$('.controller-3 ul').append(fragment);

var index3 = 0;
var pos3 = 1;
$('.controller-3 ul li:first-child').addClass('selected');

$(".controller-3 ul li").click(function(){
    index3 = $(this).index();
    $(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow');
     $('.controller-3 ul li').removeClass('selected');
    $(this).addClass('selected');
    //alert(ampleitem);
});
$(".w-next").click(function(){
        if( index3 != $(".controller-3 ul li").size()-1){
          index3++;
          $(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow');
          pos3++;
          $('.controller-3 ul li.selected').removeClass('selected').next().addClass('selected');
    }
   });
$(".w-prev").click(function(){
  if( index3!=0 ){
      index3--;
      $(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow');
      pos3--;
      $('.controller-3 ul li.selected').removeClass('selected').prev().addClass('selected');
  }
});
}

我的html代码是

<div class="nav-work">
<div class="w-prev">Next</div>
<div class="w-next">Prev</div>
</div>
<div class="wrapper-project">
<ul>
    <li><img alt="" src="{tag_portfolio image 1_value}" /></li>
    <li><img alt="" src="{tag_portfolio image 2_value}" /></li>
    <li><img alt="" src="{tag_portfolio image 3_value}" /></li>
    <li><img alt="" src="{tag_portfolio image 4_value}" /></li>
    <li><img alt="" src="{tag_portfolio image 5_value}" /></li>
</ul>
</div>

</div>


</div>

---

一个简单的解决方案可以给出如下想法：

将图像或要显示的图像的容器存储在数组中。 将当前图像的索引保留在变量中。 每当用户单击prev或next时，更新索引值和显示的图像。

---

. 看看这把小提琴。这就是我制作图像滑块的方法。我希望它能帮助您使用图像滑块。我使用Jquery for thisthnaks为您快速回复。但是我需要通过修改baove代码来解决这个问题。你能帮我做一把小提琴吗？那么我能看到什么问题吗is@IshfaqMuzaffar如果有一个例子，包括CSS@IshfaqMuzaffar此外，如果你添加了与你的图库不相关的HTML，也没有任何帮助。通过发布不必要的代码，你只会让人们怀疑这是为什么。将代码剥离到基本内容。清除、项目显示、.w箭头、.btn bla bla bla都是噪音。

var images_li = $(".wrapper-project ul li").toArray(), current_img = 0;
$(images_li[current_img]).show();

$(".btn-prev").click(function(){
    $(images_li[current_img]).hide();
    current_img = (current_img === 0) ? images_li.length - 1 : current_img - 1;
    $(images_li[current_img]).show();
});

$(".btn-next").click(function(){
    $(images_li[current_img]).hide();
    current_img = (current_img === images_li.length-1) ? 0 : current_img + 1;
    $(images_li[current_img]).show();
});