Плавная оптическая ротация изображений по горизонтали на основе jQuery системы .

Главная страница сайта .

Реальный пример .

HTML примера ротатора по горизонтали одного изображения .

var imgEsQ_count; var imgEsQ_interval; var old_imgEsQ = 0; var current_imgEsQ = 0; $(document).ready(function(){imgEsQ_count = $("div.imgEsQ").size(); $("div.imgEsQ:eq("+current_imgEsQ+")").css('left','0px'); imgEsQ_interval = setInterval(imgEsQ_rotate,7000); $('#imgscroll').hover(function() { clearInterval(imgEsQ_interval);}, function() {imgEsQ_interval = setInterval(imgEsQ_rotate,3000); imgEsQ_rotate();}); }); function imgEsQ_rotate() {current_imgEsQ = (old_imgEsQ + 1) % imgEsQ_count; $("div.imgEsQ:eq(" + old_imgEsQ + ")").animate({left: '0px',opacity: 0.0},"slow", function() {$(this).css('left','-100%');}); $("div.imgEsQ:eq(" + current_imgEsQ + ")").show().animate({left: '73%',opacity: 1.0},"slow"); old_imgEsQ = current_imgEsQ;}
</script>
<div id="imgscroll" title="Наведение курсора , останавливает ротацию. Последующий увод , ускоряет дальнейшую ротацию изображений . Наведение и увод курсора активирует внеочередную смену содержимого .">
<div class="imgEsQ"><img alt="" src="http://runettex.clan.su/FPC/FPAptic.jpg"></div>
<div class="imgEsQ"><img alt="" src="http://runettex.clan.su/FPC/FPBptic.jpg"></div>
<div class="imgEsQ"><img alt="" src="http://runettex.clan.su/FPC/FPOptic.jpg"></div>
</div>

CSS данного примера .

#imgscroll {position: relative; overflow: hidden; height: 150px; width: 100%;}
.imgEsQ {position: absolute; left: 0px; left: 5px; height: 150px; width: 100%; display: none;}
.imgEsQ img {width: 120px; height: 150px;}

HTML контейнера изображений ротатора . В блоке изображений контейнера может стоять несколько изображений , как это отображено в примере .

jQuery скрипт данного примера . Цветом выделено :

1 . 7000 - интервал ротации блоков изображений .

2 . 3000 - интервал ротации блоков изображений после наведения него и увода курсора . При наведении курсора ротация останавливается пока курсор находится на блоке изображений .

3 . 73% - значение отступа блока изображений от левой стороны контейнера ротатора .

4 . 1.0 - коэффициент прозрачности изображений в ротаторе .

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