1

以下のコードは、www.blacknegative.com に似た水平方向のページ ドラッグ ナビゲーション システムの機能であり、ユーザーはクリックして左または右にドラッグして別のページを表示します。これは現在 4 ページに設定されていますが、10 ページが必要であり、これらのページを追加するためにここに含まれる計算を更新する方法がわかりません。

function initDrag(){
    var selfWidth = $("#proof").width();
    var selfLimit = selfWidth * .75;
    var slide2 = selfWidth * 0.25;
    var slide3 = selfWidth * 0.5;


    var currentIndex = 0;
    var items = [];
    $("#proof > div").each(function(){
        items.push({
            element:$(this),
            id:$(this).attr("id")
        });
    });
    $('#proof').draggable({
        axis: 'x',
        cursor: 'move',
        containment: [-selfLimit, 0, 0, 0, 0],
        start: function(event,ui){
            event.stopPropagation();
            var offsetXPos = parseInt(ui.offset.left) * -1;
            if (offsetXPos >= 0 && offsetXPos < selfWidth * 0.25){
                currentIndex = 0;
            } else if (offsetXPos >= selfWidth * 0.25 && offsetXPos < selfWidth * 0.5){
                currentIndex = 1;
            } else if (offsetXPos >= selfWidth * 0.5 && offsetXPos < selfWidth * 0.75){
                currentIndex = 2;
            } else {
                currentIndex = 3;   
            };
            console.log(currentIndex);
        },
        stop: function(event,ui){
            event.stopPropagation();
            var offsetXPos = parseInt(ui.offset.left) * -1;
            console.log(offsetXPos);
            var updatedPosition;
            if(currentIndex == 0){
                if(offsetXPos >= selfWidth * 0.04){
                    $('#proof').animate({
                        left: slide2 * -1
                    });
                } else {
                    $('#proof').animate({
                        left: 0
                    });
                }
            } else if(currentIndex == 1){
                if(offsetXPos >= selfWidth * 0.29){
                    $('#proof').animate({
                        left: slide3 * -1
                    });
                } else if(offsetXPos <= selfWidth * 0.21){
                    $('#proof').animate({
                        left: 0
                    });
                } else {
                    $('#proof').animate({
                        left: slide2 * -1
                    });
                }
            } else if(currentIndex == 2){
                if(offsetXPos <= selfWidth * 0.46){
                    $('#proof').animate({
                        left: slide2 * -1
                    });
                } else if(offsetXPos >= selfWidth * 0.54){
                    $('#proof').animate({
                        left: selfLimit * -1
                    });
                } else {
                    $('#proof').animate({
                        left: slide3 * -1
                    });
                }
            } else {
                if(offsetXPos <= selfWidth * 0.71){
                    $('#proof').animate({
                        left: slide3 * -1
                    });
                } else {
                    $('#proof').animate({
                        left: selfLimit * -1
                    });
                }
            }
        }
    });
}

$(document).ready(function(){
    initDrag();
    window.onresize = function(){
        initDrag();
    };
    $('a.gallery').colorbox();
    //Examples of how to assign the ColorBox event to elements
    $(".group1").colorbox({rel:'group1'});
    $(".group2").colorbox({rel:'group2', transition:"fade"});
    $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
    $(".group4").colorbox({rel:'group4', slideshow:true});
    $(".ajax").colorbox();
    $(".youtube").colorbox({iframe:true, innerWidth:900, innerHeight:506});
    $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
    $(".inline").colorbox({inline:true, width:"50%"});
    $(".callbacks").colorbox({
        onOpen:function(){ alert('onOpen: colorbox is about to open'); },
        onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
        onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
        onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
        onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
    });

    //Example of preserving a JavaScript event for inline calls.
    $("#click").click(function(){ 
        $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
        return false;
    });



});

これらのページを呼び出す CSS は #page-1 から #page-4 です。

追加情報が必要な場合はお知らせください。ただし、私の推測と確認の作業は、物事を台無しにするだけです。

ありがとう！

4

1 に答える 1

0

よりシンプルで機能的なスライダー システムを作成しました。プルーフ div 内にいくつの div があるかは問題ではありません

ここで表示できますJsFiddle (ドラッグして表示)

于 2012-08-27T17:56:24.353 に答える