jQuery - анимация повтора слайдов при циклическом нажатии

#javascript #jquery #slider #jquery-animate #infinite-loop

#javascript #jquery #слайдер #jquery-анимировать #бесконечный цикл

Вопрос:

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

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

любая помощь или совет приветствуются, спасибо

смотрите эту скрипку для лучшей идеи:

http://jsfiddle.net/TheDeveloper/5LF8d/8 / (нажмите и удерживайте правую кнопку мыши)

 var main_box = $("div.main_box:first");
$(document).ready(function () {
    $('#left').mousedown(left_scrolling);
    $('#right').mousedown(right_scrolling);
    $('#right').mouseup(stopScrolling);
    $('#left').mouseup(stopScrolling);
});

function stopScrolling() {
    // stop increasing scroll position
    main_box.stop();

}

function left_scrolling() {
    main_box.animate({
        left: ' =50'
    }, 100, 'linear', left_scrolling);
}

function right_scrolling() {
    main_box.animate({
        left: '-=50'
    }, 100, 'linear', right_scrolling);
}

Ответ №1:

 function right_scrolling() {
        if($('.last_box').offset().left < -$('.last_box').width())
            main_box.css('left','0px');
            ...

Скрипка

Для прокрутки влево

 function left_scrolling() {
        if($('.main_box').offset().left 50 >= 0)
            main_box.css('left',(-main_box.width() window.innerWidth) 'px');
            ...

Ответ №2:

Определите границы вашего main_box и проверьте наличие этих граничных условий в ваших функциях прокрутки.

 $(".main_box").position()
Object {top: 401, left: -3558.5}

Если ваши левые границы ниже, то, скажем, -3000, вы могли бы использовать смещение, чтобы «обернуть» объект обратно на другую сторону:

Псевдокод

 if(Object.left < -3000){
     $(".main_box").offset({top: 401, left: 3558});
}

Аналогичная условная проверка и оператор потребуются для переноса div, если он перемещается в другом направлении.

Ответ №3:

вот так:http://jsfiddle.net/5LF8d/10 /

 var main_box = $("div.main_box:first");
window.leftVal=0;
window.limit=parseInt($('.last_box').css('left').replace(/D/g,''));
window.limit =$('.last_box').width();
window.limit =100;
window.limit=window.limit*(-1);

function right_scrolling() {
    main_box.animate({
        left: '-=50'
    }, 100, 'linear', right_scrolling);
    window.leftVal-=50;
    if(window.leftVal<=window.limit){
        main_box.css('left','0px');
        window.leftVal=0;
    }