Auto Slider / Scroller для отображения динамического контента

Question

Может кто-нибудь сказать мне, как я могу реализовать автоматический слайдер / скроллер на моей веб-странице. Слайдер должен отображать динамические данные из базы данных. (Например: вкладка «Горячие вакансии» на домашней странице сайта plipl.com (www.plipl.com). Есть ли простой способ сделать это с помощью jQuery?

Answer 1

В этом нет ничего особенного, просто быстро попробовал. Есть 2 деления, между которыми он постоянно переключается, надеюсь, даст вам преимущество. Вы можете использовать ту же идею и загружать контент в div через AJAX.

Фрагмент кода:

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>

Answer 2

jCarousel - это плагин для карусели jQuery, который поддерживает динамический контент. Хотя на его веб-сайте нет примеров, управляемых JSON, его достаточно легко реализовать с использованием стандартных функций jQuery AJAX.

Это самая надежная и настраиваемая карусель, которую я когда-либо нашел для jQuery.

Answer 3

Или, если вы не хотите использовать плагины, вы можете использовать функциональность JJuery AJAX для загрузки данных, иметь div с переполнением: hidden и заполнять его загруженными данными, показывая только раздел за раз.

Затем можно использовать функцию setInterval () , чтобы изменить $ ("# container"). ScrollTop (xx), чтобы переместить следующий набор информации в представление через заданный интервал. Вы можете прокрутить его или открыть его внезапно, на ваше усмотрение, но довольно просто с помощью jQuery.

Answer 4

да. это просто. захватить ваши данные из базы данных. скажем, список объектов HotJob, каждый из которых содержит несколько полей String. Преобразуйте каждый объект в объект JSON (который является хешем). Составьте список этих объектов JSON. используйте свой веб-фреймворк X для распечатки JSON.

Используйте jQuery getJSON, чтобы получить объект JSON. Переберите каждый HotJob и запишите информацию.

Google для "jquery json scroller" и найти что-то, что поддерживает JSON из коробки. это делает: http://www.logicbox.net/jquery/simplyscroll/flickr.html Конечно, его изображения, но вы можете изменить его для поддержки текста.