jQuery бесконечная карусель с миниатюрой - PullRequest
Новая
       14

jQuery бесконечная карусель с миниатюрой

0 голосов
/ 07 февраля 2012

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

jQuery(document).ready(function(){
    speed = 8000;
    max_slide = jQuery(".slides_control div.fps-slide").size();
    val_x = 0;
    run = setInterval('rotate()', speed);

    jQuery("#slider").hover(
        function () { clearInterval(run); }, 
        function () { run = setInterval('rotate()', speed); }
    );


});



function rotate() {
    thumbFirst = jQuery(".fps-pagination li:first-child");
    thumbContainer = jQuery(".fps-pagination");
    animationSpeed = 800;
    if (val_x > max_slide) { val_x = 0 }

    thumbFirst.clone().appendTo(jQuery(".fps-pagination"));

    jQuery(".slides_control div.fps-slide:eq("+val_x+")").animate({"opacity":"0"}, { queue: false, duration: animationSpeed }); 
    val_x++;
    jQuery(".slides_control div.fps-slide:eq("+val_x+")").animate({"opacity":"1"}, { queue: false, duration: animationSpeed });

    thumbContainer.animate(
        {"top":"-137px"},
        {queue:false, duration: animationSpeed, 
        complete: function() { 
            thumbFirst.remove(); 
            thumbContainer.css({"top": "0px"})
        }
    });
}

jsFiddle: http://jsfiddle.net/AY3y2/1/ (не очень хорошо работает в этой среде) Живой код: http://webserver.lewebsimple.ca/~tempcode/

1 Ответ

1 голос
/ 07 февраля 2012

Вы можете сделать короткий пример jsfiddle ???

Редактировать

используйте эту функцию поворота, ваша проблема была в том, если val_x> maxSlide это должно быть> = и после val_X ++, но попробуйте 

function rotate() {
    thumbFirst = jQuery(".fps-pagination li:first-child");
    thumbContainer = jQuery(".fps-pagination");
    animationSpeed = 800;


    thumbFirst.clone().appendTo(jQuery(".fps-pagination"));

    jQuery(".slides_control div.fps-slide:eq(" + val_x + ")").animate({ "opacity": "0" }, { queue: false, duration: animationSpeed });
    val_x++;
    if (val_x >= max_slide) { val_x = 0 }
    jQuery(".slides_control div.fps-slide:eq(" + val_x + ")").animate({ "opacity": "1" }, { queue: false, duration: animationSpeed });

    console.log(jQuery(".slides_control div.fps-slide:eq(" + val_x + ")").length + "valor x " + val_x);

    thumbContainer.animate({ "top": "-137px" }, { queue: false, duration: animationSpeed, complete: function () { thumbFirst.remove(); thumbContainer.css({ "top": "0px" }) } });
}
...