0

次の JavaScript を使用する単純なコンテンツ/ボックス スライダーを作成しました。

$('#left').click(function () {
    $('#videos').animate({
        marginLeft: '-=800px'
    }, 500);
});
$('#right').click(function () {
    $('#videos').animate({
        marginLeft: '+=800px'
    }, 500);
});

これがデモです：http://jsfiddle.net/tjset/2/

私がやりたいことと、すべてのボックスがスライドしたときに矢印（左右のボックス）を表示および非表示にする方法がわかりません。

だから私は左に 4 回クリックし、すべてのボックスをスライド! 次に、「左」を非表示にして、それ以上-800pxを指定できないようにします

私に何ができる？

4

2 に答える 2

1

これには多くの jQuery プラグインがあります。最初に結果の数を決定し、表示する数を決定してから、別の変数を使用して左側に非表示の数と右側に非表示の数を追跡します。そう...

var total = TOTAL_RESULTS; var leftScrolled = 0; var rightScrolled = total - 3; // minus 3, since you want 3 displayed at a time. marginLeft を使用する代わりに、これらすべてをラッパー内にラップし、位置を絶対に設定します。次に、「左」プロパティまたは「右」プロパティを使用してアニメーション化します。これを行うには多くのコードが必要ですが、それほど多くはありませんが、多くのプラグインがあるため、jquery.com でプラグインを検索し、これを行う方法の例を探す方がよいと思います。marginLeft は、使用しているブラウザーのバージョンによっては、多くの表示上の問題が発生する可能性があるため、適切な方法ではありません。

于 2013-08-01T21:16:20.637 に答える
1

できることは、アニメーションが完了した後で、margin-leftプロパティがビデオの境界よりも小さいか大きいかを確認することです<div>。そうである場合は、クリックされたナビゲーション ボタンに応じて、該当するナビゲーション リンクを非表示にします。

以下のコードをチェックしてください。

$('#left').click(function () {
    // reset the #right navigation button to show
    $('#right').show();
    $('#videos').animate({
        marginLeft: '-=800px'
    }, 500, 'linear', function(){
        // grab the margin-left property
        var mLeft = parseInt($('#videos').css('marginLeft'));

        // store the width of the #video div
        // invert the number since the margin left is a negative value
        var videoWidth = $('#videos').width() * -1;

        // if the left margin that is set is less than the videoWidth var,
        //  hide the #left navigation. Otherwise, keep it shown
        if(mLeft < videoWidth){
            $('#left').hide();
        } else {
            $('#left').show();
        }
    });
});

// do similar things if the right button is clicked
$('#right').click(function () {
    $('#left').show();
    $('#videos').animate({
        marginLeft: '+=800px'
    }, 500, 'linear', function(){
        var mRight = parseInt($('#videos').css('marginLeft'));
        if(mRight > 100){
            $('#right').hide();
        } else {
            $('#right').show();
        }
    });
});

jsfiddle をチェックしてください:

http://jsfiddle.net/dnVYW/1/

于 2013-08-01T21:19:20.253 に答える