1

我有这样的元素

<div id="screen">
  <div class="post">Post1......etc</div>
  <div class="post">Post2......etc</div>
  <div class="post">Post3......etc</div>
  <div class="post">Post4......etc</div>
  <div class="post">Post5......etc</div>
  <div class="post">Post6......etc</div>
  <div class="post">Post7......etc</div>
  <div class="post">Post8......etc</div>
  <div class="post">Post9......etc</div>
  <div class="post">Post10.....etc</div>
</div>

但在屏幕框中，大小仅限于显示 5 个元素。所以首先会显示 Post1 到 Post5。休息被溢出隐藏。每隔 2 秒，下一个元素应通过向上滚动显示。即 2 秒后，此内容screen将向上滚动 1 个项目。现在它将显示 Post2 到 Post6。这会像循环一样每 2 秒持续一次。在 Post10 之后，应该出现 Post1，然后是 Post2，依此类推。

我不知道该怎么做。我阅读了 jQuery 循环的文档：http: //jquery.malsup.com/cycle/

但我不知道如何做到这一点。这种效果就像一个新闻滚动条。

请帮忙

4

2 回答 2

1

Cycle 是错误的插件，因为它一次只显示一张图像，它不做你想要的滑动效果。试试 jCarousel，它非常流行且易于使用（许多示例和良好的文档）

http://sorgalla.com/projects/jcarousel/

一般来说，如果没有与您想要实现的目标相近的演示，则该插件很可能无法按预期工作。

于 2012-04-27T10:27:39.057 回答
0

jCarousel 是一个用于显示代码的漂亮插件！但是您需要进行一些蒙皮才能根据您的要求显示它。

要使用 jCarousel 让您的滚动条运行，您必须对当前的 HTML 结构进行一些修改。

我已将 DIV 类型结构替换为无序列表。

<ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
    <li>Post1......etc</li>
    <li>Post2......etc</li>
    <li>Post3......etc</li>
    <li>Post4......etc</li>
    <li>Post5......etc</li>
    <li>Post6......etc</li>
    <li>Post7......etc</li>
    <li>Post8......etc</li>
    <li>Post9......etc</li>
</ul>

要以最基本的方式运行此插件，您需要将 jCarousel 脚本和 CSS 主题添加到您的页面（我使用了 jCarousel 的Tango主题）。

以下是使用插件的方法：

$(document).ready(function(){
    $('#mycarousel').jcarousel({
        vertical: true,    //Display a vertical carousel
        auto: 2,    //Scroll up automatically after every 2 seconds
        scroll: 1,    //No. of items to scroll up
        visible: 5,    //No. of visible items
        wrap: 'last'    //Go back to the 1st items after you've scrolled down to the last item
    });
});

您将需要修改插件的 CSS 以根据您的需要显示它。

这是我使用 jCarousel 创建的小提琴：http: //jsfiddle.net/kayen/VFdL8/

于 2012-04-27T10:48:13.133 回答