jQuery « jquery, автоматическая горизонтальная прокрутка

Здравствуйте!
Подскажите, пожалуйста, скрипт "карусель" - автоматической (по кругу без остановки) горизонтальной прокрутки изображений, чтобы был ряд из 2-3 изображений, а не по одному. чтобы при наведении курсора на изображение, прокрутка останавливалась и можно было пройти по ссылки. Много есть разных прокруток, но как правило не автоматических, а со стрелочками.
Заранее благодарю, всех откликнувшихся!
0
jquery прокрутка

1 ответов

Ну вот, с пылу-жару. Специально для Вас =)
jQuery


$(document).ready(function(){
  var marg = 2; // отступы между фотками
  var hght = 210; // высота карусели
  speed = 2; // скорость прокрутки
 
     
  var imgs = $("#scrolled > img");
  var scrl = $("#scrolled");
  var crsl = $("#carusel");
  wdth = 0;
  imgs.css("margin","0 "+marg);
  crsl.css({overflow:"hidden","height":hght});
  $.each(imgs,function(index,value){
    wdth += ($(imgs[index]).width()+(marg*2)+5);        
  })
  scrl.width(wdth);  
 
  function rightScroll(){
    var firstImg = $("#scrolled > img:first");
    var lastImg = $("#scrolled > img:last");  
    var scroll = crsl.scrollLeft();
    crsl.scrollLeft(scroll + speed);
    if(scroll > firstImg.width()){
      crsl.scrollLeft(scroll - (firstImg.width()+(marg*2)));
      firstImg.clone(true).insertAfter(lastImg);
      $(firstImg).remove();
    }
  }
  crsl.mouseover(function(){
    clearInterval(timer);            
  }).mouseout(function(){
    timer = setInterval(rightScroll,10);          
  })
  timer = setInterval(rightScroll,10);
});
 

html

<div id="carusel" style="border:solid;width:700px;overflow:auto">
  <div id="scrolled">  
          <img src="#" width="300px" height="200px" style="background-color:green;float:left;" alt="image 0">
    <img src="#" width="350px" height="200px" style="background-color:yellow;float:left;" alt="image 1">
    <img src="#" width="250px" height="200px" style="background-color:blue;float:left;" alt="image 2">
    <img src="#" width="310px" height="200px" style="background-color:red;float:left;" alt="image 3">
  </div>  
</div>
 

http://jsfiddle.net/J8jX3/1/
2