Справка по скрипту jQuery Content Slider - PullRequest
Новая
       11

Справка по скрипту jQuery Content Slider

0 голосов
/ 26 февраля 2010

У меня на сайте есть <div>, который содержит дочерние <div>.Я хочу, чтобы эти дети скользили на месте, как слайдер контента.Я пробовал несколько разных плагинов, но все они потерпели неудачу, потому что они пытались сделать какую-то манипуляцию DOM, которая только делала вещи плохими ...

Моя собственная реализация плоха и, кажется, имеет большую производительностьвопросов.

Итак, я хотел бы знать, знает ли кто-нибудь о хорошем слайдере контента, который не испортит вещи, и который, мы надеемся, имеет хорошую документацию.Не рекомендую bxSlider или easySlider, пробовал их, но они провалились, особенно bxSlider.

Вот как устроены элементы: 

<div class="Parent">
    <div>
        <h2>...</h2>
        <ul>
            <li>...</li>
        </ul>
        <p>...</p>
    </div>
    (Repeat)
</div>

Заранее спасибо!

РЕДАКТИРОВАТЬ

Я перестроил свою реализацию, и она работает почти так, как я хочу.Проблема в том, что когда он достигает конца списка, он очень быстро скользит назад по всем элементам, а затем начинается заново.Не уверен, как именно это исправить.Буду признателен за любые предложения! 

var interval;

var Slider = function () {
    var width = $(".Parent").width();
    var count = $(".Children").size();
    var margin = width;
    var wrapper = $(".Wrapper");
    var a = 0;

    wrapper.css({
        width: (width * count)
    });

    var interval = window.setInterval(function () {
        if (margin == (width * count)) {
            margin = 0;
            a = 0;
        } else {
            margin = (width * a);
        };

        wrapper.animate({
            marginLeft: ("-" + margin + "px")
        }, 1000);

        a++;
    }, 6000);
};

Ответы [ 2 ]

0 голосов
/ 19 июля 2010

У меня была такая же проблема. Я решил использовать это: (это часть моего слайд-плагина) Применить внутрь jquery(select_expression).each()

function start()
{

var a=$('div:first',$this);

a.clone().appendTo($this);

$(a).animate({'marginLeft':options.width*-1},options.speed,function(){$(a).remove();});

setTimeout(function() {start();}, delay);

}
0 голосов
/ 26 февраля 2010

Этот работает для меня. Может быть, это поможет вам: 

<script type="text/javascript">
var headline_count;
var headline_interval;
var old_headline = 0;
var current_headline = 0;

headline_count = $("div.headline").size();

$("div.headline:eq("+current_headline+")").css('top','5px');

headline_interval = setInterval(headline_rotate,7000); //time in milliseconds
$('#scrollup').hover(function() {
        clearInterval(headline_interval);
    }, function() {
        headline_interval = setInterval(headline_rotate,7000); //time in milliseconds
        headline_rotate();
    });

function headline_rotate() {
    current_headline = (old_headline + 1) % headline_count; 
    $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() {
        $(this).css('top','210px');
    });
    $("div.headline:eq(" + current_headline + ")").show().animate({top: 5},"slow");  
    old_headline = current_headline;
}
</script>

// HTML 

<div id='scrollBox'>
 <div id='scrollup'>
   <div class="headline">...</div>
   <div class="headline">...</div> 
   <div class="headline">...</div> 
 </div>
</div>
...