javascript - 自动 slider /滚动条显示动态内容

Question

谁能告诉我如何在我的网页中实现自动 slider /滚动条。 slider 应显示数据库中的动态数据。 (例如:plipl.com 网站主页 (www.plipl.com) 中的“热门职位”选项卡。有没有简单的方法可以使用 jQuery 实现此目的？

Answer 1

下面的没什么特别的，赶紧尝试一下。它有 2 个 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>