Первый скрипт. Необходимо, чтобы последняя картинка оставалась видимой, после выполнения скрипта.
При повторном клике – уже по последней картинке – скрывалась последняя картинка, а первая становилась видимой, чтобы можно было заново запустить скрипт.
Разметка.
<ul class="pad">
<li class="show"><img src="img/rub1.png" class="rub1"/></li>
<li class="hideme"><img src="img/rub2.png" class="rub1"/></li>
<li class="hideme"><img src="img/rub3.png" class="rub1"/></li>
<li class="hideme"><img src="img/rub4.png" class="rub1"/></li>
<li class="hideme"><img src="img/rub5.png" class="rub1"/></li>
</ul>
Скрипт.
function theRotator() {
// Устанавливаем прозрачность всех картинок в 0
$('div#rotator ul li').css({opacity: 0.0});
// Берем первую картинку и показываем ее (по пути включаем полную видимость)
$('div#rotator ul li:first').css({opacity: 1.0});
// Вызываем функцию rotate для запуска слайдшоу, 5000 = смена картинок происходит раз в 5 секунд
setInterval('rotate()',50);
}
function rotate() {
// Берем первую картинку
var current = ($('div#rotator ul li.show')? $('div#rotator ul li.show') : $('div#rotator ul li:first'));
// Берем следующую картинку, когда дойдем до последней начинаем с начала
var next = ((current.next()) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));
// Расскомментируйте, чтобы показвать картинки в случайном порядке
// var sibs = current.siblings();
// var rndNum = Math.floor(Math.random() * sibs.length );
// var next = $( sibs[ rndNum ] );
// Подключаем эффект растворения/затухания для показа картинок, css-класс show имеет больший z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 0);
// Прячем текущую картинку
current.animate({opacity: 0.0}, 50)
.removeClass('show');
};
2 Скрипт. – Модальное окно "FancyBox". Необходима задержка перед выполнением скрипта X секунд
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox(
{
"frameWidth" : 600, // ширина окна, px (425px – по умолчанию)
"frameHeight" : 435 // высота окна, px(355px – по умолчанию)
});
});
</script>