Question

我正在与一个情况作斗争并且认为我会在这里发布问题，看看是否有人可以弄清楚我哪里出错了。

我正在做的事情背后的想法如下：

我有一个页面（这实际上是iPad应用程序），允许用户向左和向右滚动向前和向后滚动。每次用户向左滑动（向前移动）时，我们都想向他们显示一个新的768px页面（宽度）。由于每个div的宽度为768像素，而且我们可以拥有50多个div，其背后的想法是删除主页。

所以我一直在屏幕上有4个div，一次只能显示1个div。所以在创业时我们有类似下面的东西。

<content>
<div id='wrapper_1'>content</div>
<div id='wrapper_2'>content</div>
<div id='wrapper_3'>content</div>
<div id='wrapper_4'>content</div>
</content>

当用户向右滑动时我想删除wrapper_1，添加wrapper_5并且基本上所有内容都正确定位。

我遇到的问题是每次我删除前导div我的内容div明显改变宽度而我丢失了我正在看的页面。因此，我脑海中明显的“修复”是重新定位内容，考虑到我刚删除的div。

但是我正在与jquery偏移方法作斗争。要么我使用不正确，要么我忽略了一些东西。

 $('#wrapper_'+this.pageArray[0]).remove();
 this.pageArray.shift();    


 var n = pageIndex - 1;
 var t = 768 * n;

 $("#content").offset({ left: t})

我通过将数据存储在数组中来跟踪页面上的div。每次我添加一个页面时，我基本上都会在div上执行remove（），然后在数组上进行移位。现在问题是偏移量不像我预期的那样工作。基本上，左值没有给出绝对x位置。

首先，这种方法看起来是否正确？其次是我理解/实现偏移不正确？

编辑：

对于追随该线程的任何人，似乎我最大的问题是我如何处理手势。似乎有一些事件冲突，使用手势库肯定似乎已经清除了我的很多混乱。

以下是我的更新代码，似乎运行良好。随意批评这种方法。

    <html>
    <head>
<style>
    .wrapper{
        height: 200px;
        width: 600px;
        overflow: hidden;
    }
    .button_wrapper{
        width: 600px;
    }
    #content{
        background-color: #F00;
        height: 200px;
        width: 3000px;
    }
    .page{
        width: 200px;
        height: 200px;
        float: left;
        background-color: #FF0;
    }
    #wrapNext{
        width: 100px;
        height: 20px;
        background-color: #FF0000;
        float: right;
        cursor: pointer;
    }
    #wrapPrev{
        width: 100px;
        height: 20px;
        background-color: #FF0000;
        float: left;
        cursor: pointer;
    }

    .site_wrap > .slides_wrap {
        margin-bottom: 1em;
        margin-left: -8px;
        margin-right: -8px;
    }

    .img_slides_wrap {
        width: 784px;
        border: 8px solid #333333;
        background-color: #444444;
        overflow: hidden;
    }

    .img_slide {
        padding: 0;
    }

    .js .img_slide {
        /* Overide template's height transitions. */
        width: 100%;
        height: auto;
    }

    .slide_buttons_index {
        text-align: center;
    }

    .notransition,
    .notransition .slide {
        -webkit-transition-duration: 0 !important;
           -moz-transition-duration: 0 !important;
            -ms-transition-duration: 0 !important;
                transition-duration: 0 !important;

        -webkit-transition-delay: 0 !important;
           -moz-transition-delay: 0 !important;
            -ms-transition-delay: 0 !important;
                transition-delay: 0 !important;
    }

    @media screen and (max-width: 640px) {
        .img_slides_wrap {
            width: 100%;

            -webkit-box-sizing: content-box;
               -moz-box-sizing: content-box;
                -ms-box-sizing: content-box;
                    box-sizing: content-box;
        }
    }
</style>
    </head>
    <body>
<div class='wrapper'>
    <div id='content' class='img_slides_wrap slides_wrap wrap'>
        <div id='page0' class='page'>Page 0</div>
        <div id='page1' class='page'>Page 1</div>
        <div id='page2' class='page'>Page 2</div>
        <div id='page3' class='page'>Page 3</div>
    </div>
</div>
<div class='button_wrapper'>
    <div id='wrapPrev'>
        <div id="prev">Previous</div>
    </div>
    <div id='wrapNext'>
        <div id="next">Next</div>
    </div>
</div>
    </body>
    <script src="jquery.min.js"></script>
    <script src="jquery.event.move.js"></script>
    <script src="jquery.event.swipe.js"></script>

    <script>
    $(document).ready(function() {

var counter = 4;
var selectedPageIndex = 1;
var lastKnownX = 0;
var articleListLength = 10; // testing

$("#next").click(function() {
  showNext();
});

$("#prev").click(function() {
  showPrev();
});


function showNext(){
    if (counter <= articleListLength + 1){
        // first remove the leading div
        var leadingDiv = $('#page'+(counter - 4));
        leadingDiv.animate({ width: '0px' }, 250, function() {
            $(this).remove();
        });
        var html = "<div id='page"+counter+"' class='page img_slide slide'>Page "+counter+"</div>";
        $('#content').append(html);
        counter ++;
        selectedPageIndex ++;   
    }
}

function showPrev(){
    if(counter >= 5){
        var target = selectedPageIndex - 1;
        var leadingDiv = $('#page'+(target));
        var newLeadingDiv = $('#page'+(target - 1));

        var html  = "<div id='page"+(target-1)+"' class='page img_slide slide' style='width:0px'>Page "+(target-1)+"</div>";
        $(html).insertBefore('#page'+(selectedPageIndex-1));

        $('#page'+(target - 1)).animate({ width: '200px' }, 250, function() {

        });
        var removalTarget = $('#page'+(selectedPageIndex + 2));

        removalTarget.remove();

        counter --;
        selectedPageIndex --;  
    }
}

var wrap = jQuery('.slides_wrap'),
    width = wrap.width();

    $('#content')

    .on('swipeleft', function(e) {
        showNext();
    })

    .on('swiperight', function(e) {
        showPrev();
    })


    });
    </script>
    </html>

Answer 1

移动应用程序（android，iphone）和浏览器有一个很棒的swipeview插件：http://cubiq.org/swipeview。

它完全符合您的需要（您可以禁用循环效果） - 这是demo page。

如果您不想使用插件，它可能会帮助您了解如何操作。

JavaScript / Paginating Divs

1 个答案: