次回または前のボタンをクリックしなくても、画像を繰り返しスクロールできます。

Question

<script> 
    $(document).ready(function() { 
      var speed = 600; 

      $('#navPrev').click(function() { 
       $('#carouselul').animate({ marginLeft: '-280px' }, speed); 
      }); 

      $('#navNext').click(function() { 
       $('#carousel ul').animate({ marginLeft: '1px' }, speed); 
      }); 
     }); 

    $('#carousel ul').toggle(
     function() { 
      $('#drop').hide('drop', { direction: 'right' }, 1000); 
     }, 
     function() { 
      $('#drop').show('drop', { direction: 'down' }, 500); 
     } 
    ); 
</script> 

<style type="text/css"> 
    #container {height:100px; width:500px; font-family:Tahoma;} 
    #carousel { height:100px; width:500px; border:1px solid #000; 
    overflow:hidden;} 
    #carousel ul { list-style-type:none;margin-top:4px; width:2000px; margin- 
    left:0; left:0; padding-left:1px;} 
    #carousel li { display:inline;} 
    #carousel ul li img{ width:90px; height:90px; border:1px solid #ccc; 
     float:left; } 
    #navPrev {float:left;} 
    #navNext {float:right;} 
</style> 

うまくいけばうまくいきます。

Answer 1

これは役立つかもしれない：

var animate = function() { 
    var speed = 600; 

    animate.toggle = !animate.toggle; 

    $('#carousel ul').animate({ 
     marginLeft: (animate.toggle ? '-280px' : '1px') 
    }, speed, delayAnimate); 
}; 


var delayAnimate = function() { 
    var delay = 500; 
    setTimeout(animate, delay); 
}; 

とクエリは非常に高価であるので、あなたはより良い常に、あなたのDOMのクエリの結果をキャッシュしたいです。 このように：

var carusel = $('#carousel ul'); 

var animate = function() { 
    // ... 
    carousel.animate() 
}