1

jQuery を使用して非常に基本的なスライダーを作成しました。.theleft と .theright と呼ばれる 2 つの矢印があり、クリックすると一部の div コンテンツが移動するため、画像でいっぱいの水平ギャラリーが 950 ピクセルの範囲で左右に移動します。これはコードです：

$(".theright").click(function() {               
$(".mymove").animate({ 
        left: "-=950px",
      }, 1500 );
});

$(".theleft").click(function() {                
$(".mymove").animate({ 
        left: "+=950px",
      }, 1500 );
});

HTML は非常に単純です。

<div class="mymove" style="position:relative">
    <ul>
        <li>
            <img src="" title="" alt="">
        </li>
        <li>
            <img src="" title="" alt="">
        </li>
        <li>
            <img src="" title="" alt="">
        </li>
        <li>
            <img src="" title="" alt="">
        </li>
    </ul>
</div>

私の質問は、ページが読み込まれたときに最初に左矢印をクリックすると、ギャラリーがビューポートから外れて右側で失われる、つまり、スライダーを「制限」する方法が見つからないということですアクション...

それを改善する方法を知っていますか？

どうもありがとう。

4

1 に答える 1

1

スライダーがどこにあるかを追跡するある種のカウンターが必要になります。

したがって、最初に 0 から始まる場合は、次のようになります。

$(".theleft").click(function() {                
    if (slider_pos > 0) {
        $(".mymove").animate({ 
            left: "+=950px",
        }, 1500 );
        // Then update slider_pos here i.e. view_pos += 950;
    }
});
于 2010-08-27T01:34:31.273 に答える