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

0clearInterval()にリセットする代わりに、アニメーションを停止するために使用します。i

アニメーションを再ループする場合は、を呼び出し.stop()て停止し、cssを修正してバナーを元の位置に戻し、アニメーション関数を再度呼び出します。

ここにjsfiddle

または、アニメーションを停止してすべての値を初期状態にリセットすることもできますが、これを正しく機能させるには、すべての変数を手動でリセットする必要があるため、面倒になることがあります。

于 2013-02-06T04:21:42.810 に答える