JQuery Слайд-шоу Слайд-эффект слева направо

Question

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

вы можете увидеть рабочий пример here

$(document).ready(function() { 
    var delay = 3000, 
     fade = 1000; 
    var banners = $('.banner'); 
    var len = banners.length; 
    var i = 0; 
    setTimeout(cycle, delay); 

    function cycle() { 
     $(banners[i % len]).hide("slide", { 
      direction: "left" 
     }); 
     (fade, function() { 
      $(banners[++i % len]).show("slide", { 
       direction: "right" 
      }); 
      (fade, function() { 
       setTimeout(cycle, delay); 
      }); 
     }); 
    } 
}); 

Спасибо

Answer 1

, возможно, это то, что вам нужно: Updated Fiddle

первый, этот код твой никогда не называют

(fade, function() { 
    $(banners[++i % len]).show("slide", { 
     direction: "right" 
    }); 
    (fade, function() { 
     setTimeout(cycle, delay); 
    }); 
}); 

это причина cycle функция будет только запустить один раз, так как вы используете setTimeout, поэтому в вашем случае, который нужно цикл снова и снова каждые x секунд, то лучше использовать setInterval, поэтому изменить

setTimeout(cycle, delay); 

в

setInterval(cycle, delay); 

то для функции cycle, измените код этого

function cycle() { 
    $(banners[i % len]).hide("slide", { 
     direction: "left" 
    }); 
    $(banners[++i % len]).show("slide", { 
     direction: "right" 
    }); 
} 

и это сделано, код ж плохо работать сейчас. Но поскольку .banner является div, который является block элементом, то .banner будет в 2 линии, когда второй div показал перед первым div является hidden, поэтому вам нужно добавить style

position: absolute; 

к .banner так это появится в той же строке