Continuer l'effet de défilement pour les images?

Question

Je veux faire défiler mes 10 images en mode de défilement continue juste comme démontré dans ce fichier flash: Demo Flash

Mais je veux le faire en utilisant le CSS, et JavaScript jQuery ou sans utiliser le flash. Je veux faire défiler les images en continu et quand je souris dessus, le changeur s'arrêtera et quand il sortira, il commencera à défiler.

J'ai beaucoup recherché sur Google, mais je n'ai pas trouvé le script ou le plugin qui fera défiler mes images en continu et démarrera/s'arrêtera à la sortie de la souris.

Merci

Answer 1

C'est ce que je l'ai essayé avec quatre images. S'il vous plaît apporter des modifications dans ce code que vous en avez besoin.

<style type="text/css"> 
#container{ 
    width: 640px; 
    height: 200px; 
    border: 1px solid #0099FF; 
    white-space: nowrap; 
    overflow: hidden; 
    top:150px; 
    left:100px; 
    position:absolute; 
} 
.slide{ 
    position:absolute; 
    left:0px; 
} 
</style> 
<script src="jquery-1.3.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var timer; 
    $(function(){ 
     var images = $('.slide'); 
     var preImageWidth = 0; 
     for(var i=0; i<images.length; i++){ 
      if(i==0){ 
       var width = 0 - parseInt($(images[i]).css('width').replace("px","")); 
       $(images[i]).css('left',width+'px'); 
      } else if(i==1){ 
       preImageWidth = parseInt($(images[i]).css('width').replace("px","")); 
       $(images[i]).css('left','0px'); 
      } else { 
       $(images[i]).css('left',preImageWidth+'px'); 
       preImageWidth = preImageWidth + parseInt($(images[i]).css('width').replace("px",""));     
      } 
      $(images[i]).mouseover(function(){ 
       clearInterval(timer); 
      }); 
      $(images[i]).mouseout(function(){ 
       timer = setInterval("startScroll()", 10); 
      }); 
     } 
     timer = setInterval("startScroll()", 10); 
    }); 

    function startScroll(){ 
     var images = $('.slide');  
     for(var i=0; i<images.length; i++){ 
      var left = parseInt($(images[i]).css('left').replace("px",""))+1; 
      var width = parseInt($(images[i]).css('width').replace("px",""));   
      if(left>=640){ 
       left = 0 - width; 
      } 
      $(images[i]).css('left',left+'px');   
     } 
    } 
</script> 

HTML:

<div id="container"> 
<img src="images/zooey.jpg" height="200" class="slide"/> 
<img src="images/britny.jpg" height="200" class="slide"/> 
<img src="images/connelly.jpg" height="200" class="slide"/> 
<img src="images/diane.jpg" height="200" class="slide"/> 
</div> 

Answer 2

http://sorgalla.com/projects/jcarousel/ avec la vitesse d'animation "lente" et autoscroll