Question

任何人都可以告诉我如何在我的网页中实现自动滑块/滚动条。滑块应显示数据库中的动态数据。（例如：plipl.com网站主页上的热门职位选项卡（www.plipl.com）。有没有简单的方法可以用jQuery做到这一点？

Answer 1

是肯定的。这很简单。从数据库中获取数据。让我们说一个HotJob对象列表，每个对象包含一些String字段。将每个对象转换为JSON对象（这是一个哈希）。列出这些JSON对象。使用您的Web框架X打印出JSON。

使用jquery的getJSON来获取JSON对象。迭代每个HotJob并写出信息。

Google为“jquery json scroller”找到支持JSON的东西。这样做： http://www.logicbox.net/jquery/simplyscroll/flickr.html 确定，它的图像，但您可以修改它以支持文本。

Answer 2

jCarousel是一个支持动态内容的jQuery轮播插件。虽然他的网站上没有JSON驱动的示例，但使用jQuery的默认AJAX功能很容易实现。

这是我迄今为止为jQuery找到的最强大且可自定义的轮播。

Answer 3

或者如果您不想使用插件，可以使用jQuery的AJAX功能加载数据，使用溢出的div：hidden并使用加载的数据填充它，一次只显示一个部分。 / p>

然后您可以使用setInterval()函数更改$（“＃container”）。scrollTop（xx）以设定的间隔将下一组信息移动到视图中。你可以滚动它或者突然弹出它，直到你，但使用jQuery相当容易。

Answer 4

以下没什么特别的，只是很快就试了一下。有两个div，它不断切换，希望能给你一个良好的开端。您可以使用相同的想法并通过AJAX将内容加载到div中。

代码段：

的CSS：

div{width:100px;height:100px;}
#container{overflow:hidden;border:1px solid black;}
#left{background:red;float:left;}
#right{background:green;float:right;}

的JScript：

$(function() {
        //Call scrollContent function every 3secs
    var timerUp = setInterval(scrollContent, 3000);

    function scrollContent(){
        //Toggle top between 100 and 0
        var top = $("#container").scrollTop() == 0 ? 100 : 0;
        $("#container").scrollTop(top);
    }
});

标记：

<div id="container">
        <div id="left">
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
            </ul>
        </div>
        <div id="right">
            <ul>
                <li>Five</li>
                <li>Six</li>
                <li>Seven</li>
                <li>Eight</li>
            </ul>
        </div>
    </div>

自动滑块/滚动以显示动态内容

4 个答案: