用jQuery创建一个循环列表 [英] Create a circular list with jQuery

问题描述

我正在为网站创建一个移动版本，其中有一个列表，我想使其与触摸手势一起使用(例如Yahoo的移动版本网站).我正在为jQuery使用Swipe插件，并且一切正常，但问题是我想使新闻列表无限，而我对此却一无所知.

I'm creating a mobile version for a website and there's a list in that I want to make it work with touch gestures (like Yahoo's mobile version website). I'm using Swipe plugin for jQuery and everything works fine but the problem is that I want to make the news list infinite and I have not a single idea about how doing it.

问题是，如果我向右滑动第一个项目，将会有一个空白处，我将无法返回至第一个项目，并且当我向左滑动最后一个项目时，也会发生这种情况.

The problem is that if I swipe right the first item, there will be a blank place and I can't get back to first item, and in this also happens when I swipe left the last item.

我的列表是这样的:

<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代码是:

and my jquery code is:

$(".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);
        }
    }
});

有什么建议吗?

推荐答案

我对touchSwipe jQuery插件的使用经验并不成功，它在桌面浏览器上的效果很好，但对于移动浏览器来说，它的问题就太大了.

My experience with touchSwipe jQuery plugin was not successful, it works good with desktop browsers but for mobile browsers it's too buggy.

经过几天的搜索，我发现 iOSSlider 可以与浏览器和移动浏览器(Android和iDevices都可以使用) )，这就是我想要的.

After days of searching I found iOSSlider which is working with both browsers and mobile browsers (Both android and iDevices) and it's what I was looking for.

这篇关于用jQuery创建一个循环列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！