1

下面的代码是类似于 www.blacknegative.com 的水平页面拖动导航系统的功能，用户在其中单击并向左或向右拖动以查看不同的页面。目前设置为四页，但我需要十页，我不确定如何更新此处包含的数学以添加这些页面：

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 回答