Бесконечный ползунок jQuery - имитация магазина MacApp

#jquery #scroll #infinite-loop #insertafter

#jquery #прокрутка #бесконечный цикл #insertafter

Вопрос:

Если кто-нибудь знает слайдер в Mac app Store, то это то, что я воссоздал. Однако есть три проблемы.

Между ползунком справа и основным фейдером должна быть задержка анимации
Функция insertAfter ничего не делает
Ползунок не находится в бесконечном цикле

Я настроил скрипку для тестирования, если кто-нибудь сможет ее решить. http://jsfiddle.net/Z5uER/2 /

 $(document).ready(function(){

    $('.sismain a').css('opacity', 0);

    var slideqnt = $('.sismain a').length;
    var slidecur = 0;
    var slidelay = 0;
    var slidemove = 0;
        $('.sismain a').each(function(){
            $(this).delay(slidelay).animate({opacity: 1,  leaveTransforms:true}, {duration:2000, queue:true});
            slidemove -=167;
            $('.siscolin').delay(slidelay - 2000).animate({top: slidemove,  leaveTransforms:true}, {duration:2000, queue:true});
            slidelay  = 6000;
            $('.siscolin a:first').insertAfter('.siscolin a:last');
            $(this).delay(slidelay).animate({opacity: 0,  leaveTransforms:true}, {duration:2000, queue:true});
        });
});

1. Вы смогли закончить это? Это выглядит великолепно и именно то, что я искал. Извините, что не могу оказать немедленную помощь в отладке : (.

2. Не совсем. Теперь он стабилен, но я так и не смог заставить работать бесконечный слайдер. Вместо этого он плавно возвращается к началу

Ответ №1:

Я создал аналогичную функциональность. Может быть, я собираюсь написать плагин для этого.

Убедитесь, что для всех размеров вашего div установлены правильные значения (а также абсолютное позиционирование в скрипте):

HTML

 <div class="slider">
    <div class="slides">
        <div><img src="http://dummyimage.com/180x90/000/fff" /></div>
        <div><img src="http://dummyimage.com/180x90/f00/fff" /></div>
        <div><img src="http://dummyimage.com/180x90/0f0/fff" /></div>
        <div><img src="http://dummyimage.com/180x90/00f/fff" /></div>
        <div><img src="http://dummyimage.com/180x90/f0f/fff" /></div>
    </div>
    <div class="thumbs">
        <div><img src="http://dummyimage.com/60x30/000/fff" /></div>
        <div><img src="http://dummyimage.com/60x30/f00/fff" /></div>
        <div><img src="http://dummyimage.com/60x30/0f0/fff" /></div>
        <div><img src="http://dummyimage.com/60x30/00f/fff" /></div>
        <div><img src="http://dummyimage.com/60x30/f0f/fff" /></div>
    </div>
</div>
<a id="pause" href="#">pause</a>

CSS

 body {
    margin: 20px;
}
.slider {
    position: relative;
    width: 240px;
    height: 90px;
    overflow: hidden;
}
.slides div {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 90px;
    z-index: 1;
    display: none;
}
.slides div.first-child {
    z-index: 2;
}
.thumbs {
    position: absolute;
    width: 60px;
    height: 90px;
    right: 0;
    top: 0;
}
.thumbs div {
    width: 60px;
    height: 30px;
    background-color: #f00;
    position: absolute;
    top: 0;
    right: 0;
}
#pause {
    background-color: #888;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-family: Arial;
    border: 1px solid #000;
    padding: 10px;
    margin-top: 20px;
    display: inline-block;
}

JavaScript

 var intval = "";
var numberOfSlides = $('.slides > div').length;
var counter = 0;
var thumbs = $('.thumbs div').toArray();

$('.slides div:eq(0)').addClass('first-child');

$(thumbs).each(function(i,el){
    $(this).css({top: 90-(i*30 30)   'px'});
});

var doShit = function() {
    if(counter == 0) {
        $('.slides div').eq((numberOfSlides-1)).fadeOut('fast');
    }
    else {
        $('.slides div').eq((counter-1)).fadeOut('fast');
    }

    $(thumbs).each(function(i,el){
        $(this).animate({top: ' =30'}, 1000, function(){
            if(i==0) {
                $(this).css({'top': '-60px'});
                            thumbs.push(thumbs.shift());
            }
        });
    });

    $('.slides div').eq(counter).fadeIn('fast');

    if(counter < (numberOfSlides-1)) {
        counter  ;
    }
    else {
        counter=0;
    }
};

var start_Int = function() {
    if(intval==""){
        intval=window.setInterval(function() { doShit(); },2000);
    } else {
        stop_Int();
    }
};

var stop_Int = function() {
    if(intval!="") {
        window.clearInterval(intval);
        intval="";
    }
};

start_Int();

Скрипка: http://jsfiddle.net/dirkpennings/kf3v8/1 /

Надеюсь, это поможет.