Плавная оптическая ротация изображений по горизонтали на основе 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>
</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;}
.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>
<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>






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>
</script>
Non-Commercial Use: Free Runettex_team_ESQ © 2009 - 2025 Хостинг от uCoz