Question

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

HTML：

<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>

JavaScript的：

$(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 );
}

我还在http://jsfiddle.net/FzDtD/1/

做了一个演示

Answer 1

使用clearInterval()停止动画，而不是将i重置为0.

如果要重新启动动画，请调用.stop()将其停止，修复css以将横幅移回原始位置并再次调用动画功能。

jsfiddle here

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

jQuery动画 - 使幻灯片图像循环向同一方向循环

1 个答案: