Javascript jQuery动画制作幻灯片图像在同一方向上迭代循环

我想用jQuery制作自己的幻灯片。这里我被滑块图像的方向卡住了。我希望它只循环一个方向（从右到左）。请参阅下面我的代码：

HTML:

我还在上做了一个演示，使用

clearInterval（）

停止动画，而不是将

I

重置为0

如果要重新播放动画，请调用

.stop（）

停止动画，修复css以将横幅移回原始位置，然后再次调用动画函数

---

或者，您可以尝试停止动画并将所有值重置为初始状态，但我发现这有时会变得混乱，因为您需要手动确保重置所有变量以使其正常工作。

在这种情况下，它会停止循环。我想让它们反复循环。Thanks@tepkenvannkorn：因此，您只希望动画在到达终点时跳到起点而不进行“滑动”？@tepkenvannkorn:new jsfiddle更新

<div class="flash-banner">
    <ul>
       <li>
          <img src="img/flash-banner.jpg" alt="Black glass banner " />
       </li>
       <li>
          <img src="img/flash-banner-contact.jpg" alt="Black glass banner " />
       </li>
       <li>
          <img src="img/flash-banner-our-work.jpg" alt="Black glass banner " />
       </li>
    </ul>
</div>

$(document).ready( function ( e ) {
    slideshow( 6000 );
});

function slideshow( speed ) {
    // Get width from image
    $pic = $('.flash-banner ul li img')[0];
    $width = $pic.width;

    // Count the total number of children of UL 
    $count = $('.flash-banner ul').children().length;

    // Set width to UL  
    var $ul = $width * $count;
    $('.flash-banner ul').css('width', $ul);
    var i = 1;

    setInterval( function ( e ) {
        if ( i > $count - 1 ) {
              // I think the problem is here, but I can't fix it
           i = 0;
           var b = 0;
        } else {
           var b = $width * i;
        }
        console.log( b );
        $element = $('.flash-banner ul');
        $element.animate(
           {'margin-left': -b },
           { duration: speed },
           { delay: speed }
        );
        i++;
    }, speed );
}