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

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

Главная страница сайта .
Реальный пример .
HTML данного примера .
<script type="text/javascript">
function theshoEsq() {$('#shoEsq img').css({opacity: 0.0}); $('#shoEsq img:first').css({opacity: 1.0}); setInterval('rotate()',5000);} function rotate() {var current = ($('#shoEsq img.show')? $('#shoEsq img.show') : $('#shoEsq img:first'));var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('#shoEsq img:first') :current.next()) : $('#shoEsq img:first'));next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);current.animate({opacity: 0.0}, 1000).removeClass('show');}; $(document).ready(function() {theshoEsq();});
</script>
<div id="shoEsq">
<img class="show" 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>
CSS данного примера .
#shoEsq {position: relative; left: 0px; top: 0px; width: 150px;}
#shoEsq img {position: absolute; left: 0px; top: 0px; width: 150px; height: 200px;}
Настройки в CSS данного примера .
#shoEsq img {position: absolute; left: 0px; top: 0px; width: 150px; height: 200px;} - размеры изображений , ширина и высота ,ставите свои значения
#shoEsq {position: relative; left: 0px; top: 0px; width: 150px;} - высота контейнера , равна высоте изображений.
Изображения в контейнере это просто последовательно написанное множество ссылок изображений . Первое изображение в контейнере обозначено идентификатором , в виде класса ( class="show" ) .
<img class="show" 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">
jQuery скрипт ротатора изображений .

Выделенное цветом значение 5000 задёт время демонстрации изображения в ротаторе между сменам изображений . Измеряемое в миллисекундах .
<script type="text/javascript">
function theshoEsq() {$('#shoEsq img').css({opacity: 0.0}); $('#shoEsq img:first').css({opacity: 1.0}); setInterval('rotate()',5000);} function rotate() {var current = ($('#shoEsq img.show')? $('#shoEsq img.show') : $('#shoEsq img:first'));var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('#shoEsq img:first') :current.next()) : $('#shoEsq img:first'));next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);current.animate({opacity: 0.0}, 1000).removeClass('show');}; $(document).ready(function() {theshoEsq();});
</script>

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