0

我想使用 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/做了一个演示

4

1 回答 1

1

用于clearInterval()停止动画而不是重置i为 0。

如果要重新循环动画，请调用.stop()停止它，修复 css 以将横幅移回原始位置并再次调用动画函数。

jsfiddle在这里

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

于 2013-02-06T04:21:42.810 回答