Плавная оптическая ротация изображений на основе jQuery системы . 27 различных эффектов смены изображений . |
|
-
Реальный пример . Обновление страницы ( ротатор скриптов эффектов в случайном порядке ) подключает в случайном порядке разные эффекты смены изображений ....
HTML данного примера .
<script type="text/javascript" src="http://runettex.clan.su/JSC/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(function() {$('#Esqcircl').cycle({ fx:'scrollRight',
delay: -3000,
timeout: 5000 });});
</script>
<div id="slideshow"><div id="Esqcircl">
<img src="http://runettex.clan.su/FPC/WP01.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP02.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP03.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP04.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP05.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP06.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP07.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP08.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP09.jpg" alt="">
</div>
</div>
<script type="text/javascript">
$(function() {$('#Esqcircl').cycle({ fx:'scrollRight',
delay: -3000,
timeout: 5000 });});
</script>
<div id="slideshow"><div id="Esqcircl">
<img src="http://runettex.clan.su/FPC/WP01.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP02.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP03.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP04.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP05.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP06.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP07.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP08.jpg" alt="">
<img src="http://runettex.clan.su/FPC/WP09.jpg" alt="">
</div>
</div>
-
CSS данного примера .
#slideshow {margin: 0px auto; width: 300px;}
#Esqcircl img {width: 300px; padding: 5px;}
#Esqcircl img {width: 300px; padding: 5px;}
-
Настройки CSS данного примера .
300px; - ширина изображений и контейнера ротатора .
-
jQuery скрипт ротатора изображений . Описание значений и назначение .
$(function() {$('#Esqcircl').cycle({ fx:'scrollRight', - название применяемого эффекта
delay: -3000, - время смены изображения
timeout: 5000 - время демонстрации изображения
delay: -3000, - время смены изображения
timeout: 5000 - время демонстрации изображения
-
Список допустимых эффектов смены изображений скрипта данного примера .
blindX - выезд нового изображения справа и увод предыдущего
blindY - выезд изображения снизу
blindZ - выезд изображения справа снизу
cover - выезд нового изображения справа , предыдущее остаётся на месте
curtainX - сворачивание и разворачивание по центральной вертикальной оси
curtainY - сворачивание и разворачивание по центральной горизонтальной оси
fade - растворение одного и проявление следующего
fadeZoom - увеличение из точки центра изображения
growX - разворачивание по центральной вертикальной оси
growY - разворачивание по центральной горизонтальной оси
scrollUp - скроллинг снизу вверх
scrollDown - скроллинг сверху вниз
scrollLeft - скроллинг налево
scrollRight - скроллинг напрао
scrollHorz - скроллинг по горизонтали ( scrollLeft )
scrollVert - скроллинг по вертикали ( scrollDown )
shuffle - смещение изобажения влево и заход обратно под последующее
slideX - сворачивание и разворачивание по левой вертикальной оси
slideY - сворачивание и разворачивание по верхней горизонтальной оси
toss - улёт с растворение изображения направо вверх
turnUp - поворот " грани куба " снизу вверх
turnDown - поворот " грани куба " свверху вниз
turnLeft - поворот " грани куба " справа на лево
turnRight - поворот " грани куба " слева направо
uncover - съезд изображения налево
wipe - замещение врезкой справа сверху
zoom - сворачивание - разворачивание в точку центра изображения
blindY - выезд изображения снизу
blindZ - выезд изображения справа снизу
cover - выезд нового изображения справа , предыдущее остаётся на месте
curtainX - сворачивание и разворачивание по центральной вертикальной оси
curtainY - сворачивание и разворачивание по центральной горизонтальной оси
fade - растворение одного и проявление следующего
fadeZoom - увеличение из точки центра изображения
growX - разворачивание по центральной вертикальной оси
growY - разворачивание по центральной горизонтальной оси
scrollUp - скроллинг снизу вверх
scrollDown - скроллинг сверху вниз
scrollLeft - скроллинг налево
scrollRight - скроллинг напрао
scrollHorz - скроллинг по горизонтали ( scrollLeft )
scrollVert - скроллинг по вертикали ( scrollDown )
shuffle - смещение изобажения влево и заход обратно под последующее
slideX - сворачивание и разворачивание по левой вертикальной оси
slideY - сворачивание и разворачивание по верхней горизонтальной оси
toss - улёт с растворение изображения направо вверх
turnUp - поворот " грани куба " снизу вверх
turnDown - поворот " грани куба " свверху вниз
turnLeft - поворот " грани куба " справа на лево
turnRight - поворот " грани куба " слева направо
uncover - съезд изображения налево
wipe - замещение врезкой справа сверху
zoom - сворачивание - разворачивание в точку центра изображения