Auto Slider / Scroller to display dynamic content

Auto Slider / Scroller to display dynamic content

百思不得你姐 发布于 2021-11-25 字数 257 浏览 775 回复 4 原文

Can any one tell me how can i implement a auto slider/scroller in my web page. The slider should show dynamic data from a database. (Ex : Hot jobs tab in the plipl.com site's home page (www.plipl.com) . Is there any easy way to do this with jQuery ?

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

静若繁花 2022-06-07 4 楼

Or if you don't want to use plugins you could use jQuery's AJAX functionality to load in the data, have a div with overflow:hidden and populate it with the data loaded in, only showing a section at a time.

You could then use the setInterval() function to change the $("#container").scrollTop(xx) to move the next set of information into view at a set interval. You could scroll it in or have it popup suddenly, up to you but fairly easy using jQuery.

め可乐爱微笑 2022-06-07 3 楼

jCarousel is a jQuery carousel plugin that supports dynamic content. Although there are no JSON-driven examples on his website, it is easy enough to implement using jQuery's default AJAX functionality.

This is the most robust and customizable carousel I have found thus far for jQuery.

花海 2022-06-07 2 楼

yes. this is easy.
grab your data from the database. lets say its a list of HotJob objects, each object containing some String fields. Convert each object to a JSON object (which is a hash). Make a list of these JSON objects. use your web framework X to print out the JSON.

Use jquery's getJSON to grab the JSON object. Iterate over each HotJob and write out the information.

Google for "jquery json scroller" and find something that supports JSON out of the box. this does:
http://www.logicbox.net/jquery/simplyscroll/flickr.html
sure, its images, but you can modify it to support text.

诗化ㄋ丶相逢 2022-06-07 1 楼

The following is nothing special, just quickly tried it. There's 2 div's that it continously switches between, hopefully give you a head start. You could use the same idea and load content into div's via AJAX.

Code snippet:

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);
    }
});

markup:

<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>