如何使用javascript在旋转木马中创建循环？

我想用java脚本创建旋转木马，但我不知道如何创建循环？当显示最后一张图片时，如何显示第一张图片？例如，我有6个产品

HTML

     <div id="slideshow">
       <div id="ruller">
          <div class="item">
            <a href="#">
            <img src="img/16X10Wallpaper_Persian-Star.org_16.jpg" />
            <span>product 1</span></a>
          </div>

          <div class="item">
            <a href="#">
            <img src="img/16X10Wallpaper_Persian-Star.org_24.jpg" />
            <span>product 2</span></a>
          </div>

          <div class="item">
            <a href="#">
            <img src="img/24ba51c7-d3e2-434a-9e1b-55f1b10d530b_6.jpg" />
            <span>product 3</span></a>
          </div> 
       </div>
    </div>

脚本

    <script>
       a = 0;

     left_button.onclick = function () {
       a -= 225;
       ruller.style.left = a + 'px';
     }

     reight_button.onclick = function () {
       a += 225;
       ruller.style.left = a + 'px';
     }
    </script>

a=0；
left_button.onclick=函数（）{
a-=225；
ruller.style.left=a+'px'；
}
reight_button.onclick=函数（）{
a+=225；
ruller.style.left=a+'px'；
}

您只需跟踪

a的值，并相应地移动它。下面是一个实现的示例，您可以使用
%slideNum
从最后一张幻灯片转到第一张幻灯片。然后从第一张幻灯片到最后一张幻灯片进行检查，并将
a
设置为最后一个值

在下面的示例中，我只将
a
增加1，并使用
move
变量，即
255
。执行
a*move
将给出您将使用的值。这使得跟踪
a
更容易：

a = 0;
var move = 255;
var slideNum = document.getElementsByClassName("item").length;

left_button.onclick = function () {
    a = (a - 1) % slideNum; // Move back a slide   
    if( a == -1 ) a = slideNum - 1; // If we move past the first slide, move to the last
    ruller.style.left = (a*move) + 'px';
    console.log(a*move); // Consoles the value we want 
}

right_button.onclick = function () {
    a = (a + 1) % slideNum; // Moves to the next slide, will move to the first when need due to %
    ruller.style.left = (a*move) + 'px';
    console.log(a*move); 
}

由于我没有实现旋转木马的图片，因此我让程序只给出正确的数据，即
（a*move）

在提供的链接中使用javascript。该示例使用的是来自引导的旋转木马（这也需要jQuery）。你是在问自己如何创建旋转木马效果（没有引导）？是的，我想创建没有引导的效果