0

我正在为一个网站创建一个移动版本，并且有一个列表，我想让它与触摸手势一起工作（比如雅虎的移动版本网站）。我正在为 jQuery 使用 Swipe 插件，一切正常，但问题是我想让新闻列表无限，我对如何做到这一点一无所知。

问题是如果我向右滑动第一个项目，会有一个空白的地方，我不能回到第一个项目，当我向左滑动最后一个项目时也会发生这种情况。

我的清单是这样的：

<div class="newswrapper">
    <ul>
        <li>
            <a>Title 1</a>
            <div class="image">
                <img src="dummyurl1.jpg" />
            </div>
        </li>
        <li>
            <a>Title 2</a>
            <div class="image">
                <img src="dummyurl2.jpg" />
            </div>
        </li>
        <li>
            <a>Title 3</a>
            <div class="image">
                <img src="dummyurl3.jpg" />
            </div>
        </li>
    </ul>
<div>

我的jQuery代码是：

$(".newswrapper ul li").swipe({
    var newsWidth = $('.newswrapper ul li:first').width();
    swipe:function(event, direction, distance, duration, fingerCount) {
        if (direction == 'left') {
            $('.newswrapper ul').animate({left : '-=' + newsWidth}, 500);
            });
        } else if (direction == 'right') {
            $('.newswrapper ul').animate({left : '+=' + newsWidth}, 500);
        }
    }
});

有什么建议么？

4

2 回答 2

0

我使用 touchSwipe jQuery 插件的经验并不成功，它在桌面浏览器上运行良好，但对于移动浏览器来说，它太有问题了。

经过几天的搜索，我找到了适用于浏览器和移动浏览器（Android 和 iDevices）的iOSSlider，这正是我想要的。

于 2012-11-24T14:18:02.317 回答
0

我的方法是检查你是否滑得比widthone更多li。如果是这样，请从列表中删除第一个，将其放在后面，然后将的宽度重置left为ulli

你可以对另一个方向做同样的事情。

于 2012-10-11T15:56:49.480 回答