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