Плавная оптическая ротация изображений по горизонтали
QR код

Плавная оптическая ротация изображений по горизонтали на основе 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 контейнера изображений ротатора . В блоке изображений контейнера может стоять несколько изображений , как это отображено в примере .
<div id="imgscroll" title="Наведение курсора , останавливает ротацию. Последующий увод , ускоряет дальнейшую ротацию изображений . Наведение и увод курcора активирует внеочередную смену содержимого .">
<div class="imgEsQ"><img alt="" src="http://runettex.clan.su/FPC/FPAptic.jpg"><img alt="" src="http://runettex.clan.su/FPC/FPBptic.jpg"><img alt="" src="http://runettex.clan.su/FPC/FPOptic.jpg"></div>
<div class="imgEsQ"><img alt="" src="http://runettex.clan.su/FPC/FPBptic.jpg"><img alt="" src="http://runettex.clan.su/FPC/FPAptic.jpg"><img alt="" src="http://runettex.clan.su/FPC/FPOptic.jpg"></div>
<div class="imgEsQ"><img alt="" src="http://runettex.clan.su/FPC/FPOptic.jpg"><img alt="" src="http://runettex.clan.su/FPC/FPBptic.jpg"><img alt="" src="http://runettex.clan.su/FPC/FPAptic.jpg"></div>
</div>
jQuery скрипт данного примера . Цветом выделено :

1 . 7000 - интервал ротации блоков изображений .
2 . 3000 - интервал ротации блоков изображений после наведения него и увода курсора . При наведении курсора ротация останавливается пока курсор находится на блоке изображений .
3 . 73% - значение отступа блока изображений от левой стороны контейнера ротатора .
4 . 1.0 - коэффициент прозрачности изображений в ротаторе .
Значения в скрипте могут быть изменены в ту или иную сторону в зависимости от содержания блоков изображений ротатора .
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>

Non-Commercial Use: Free Runettex_team_ESQ © 2009 - 2016 Хостинг от uCoz