如何循环显示一组 div，如 twitter 徽章小部件？答案

【问题标题】：How to cycle showing a set of divs like twitter badge widgets?如何循环显示一组 div，如 twitter 徽章小部件？
【发布时间】：2011-10-16 20:25:42
【问题描述】：

Twitter 有一个小部件，可让您显示状态更新，循环浏览一组状态，使其感觉像是实时更新。

我也想这样做。我正在使用 ruby on rails 并想使用 jquery 脚本。

我拥有的是一组 10 个 div，呈现在一个页面上。我希望 5 一次出现在一个列表中，其中的时间安排是每隔几秒，列表中的最后一个 div 被隐藏，并显示 10 个列表中的另一个 div。基本上它会在 div 中循环，通过隐藏和显示某些 div 不断显示 5 个列表。

假设对于这个滚动提要，@ticker_feed.paginate(:page => params[:page], :per_page =>10)

这将有 10 个对象。然后我想输出条目，前一个下面的一个 div 如下：

 <%@ticker_feed.each do |f|%>
<%= render 'discussions/ticker_tile' %>
<% end %>

但我想要的是前 5 个出现，然后第一个向上滑动（离开），而第 6 个滚入，然后是 3、4、5、6、7，然后是 4、5、6、7 ,8... 等等。我想我必须使用 jQuery。假设我可以输出ticker_1、ticker_2、ticker_3等的ticker_tile id，用于选择器。

有人对如何做到这一点有一些见解吗？

【问题讨论】：

标签： jquery ruby-on-rails ruby-on-rails-3 widget feed

【解决方案1】：

这是一个 jQuery 插件，可以按照您描述的方式在 div 中滚动项目。

http://flowplayer.org/tools/scrollable/autoscroll.html

This example 展示了一种方法；我想这不是你想要的。

该插件的设计似乎是从列表中一次显示一个项目。当 circular = true 允许循环滚动时，插件会克隆您要滚动的项目列表中的第一个和最后一个项目。然后，当到达原始列表的末尾时，一个克隆项目。

了解这一点，您可以对 jquery.tools.js 进行一些小改动以获得您想要的效果。与其克隆一个项目，不如克隆 N 个项目。我添加了一个名为cloneCount 的选项来解决这个问题。

2830 行附近：

            conf: {
                    maskId: 'exposeMask',

                    .... 

                cloneCount:1, // cheeso

                    // callbacks
                    onLoad: null,
                    onClose: null
            }

然后在第 261 行附近，这是原始代码：

            // circular loop
            if (conf.circular) {

                    var cloned1 = self.getItems().slice(-1).clone().prependTo(itemWrap),
                             cloned2 = self.getItems().eq(1).clone().appendTo(itemWrap);

...修改成这样：

            // circular loop
            if (conf.circular) {

                    var cloned1 = self.getItems().slice(-conf.cloneCount).clone().prependTo(itemWrap),
                             cloned2 = self.getItems().slice(conf.cloneCount).clone().appendTo(itemWrap);

最后，当你创建滚动条时，这样做：

    var options = {
      circular: true,
      cloneCount:4,  // cheeso
      vertical: true,
      speed: 400
    };
    $("#scrollable-content").scrollable(options);

您必须根据容器的高度以及容器内滚动项目的高度来调整 cloneCount 数。

这里是the updated version。

【讨论】：