Здравствуйте, кодопроизводители! Низачто не могу догадаться как останавливать в нужный момент цикл, и запускать его для нужного селектора!
Ситуация такая... в окне "frame" появляются сменяя друг друга картинки, появление идет через нулевое opacity, смена через больший z-index и все это находится в цикле.
Еще присутствует контрольная панель "change_bar", клик по элементам которой меняет набор сменяемых картинок... два набора #div1 и #div2..... клик по "#c1" ставит #div1, по "#c2" - #div2.
Код этот я нагуглил и очень мне он нравится, но как его приспособить под сменяемые наборы - меня просто оно похоронило! Т.е. изначально стоит первый набор (тут всеработает), который бесконечно чередует свои p1 и p2...... клик по "#c2" - останавливает цикл для набора "div1" и запускает его для "div2" (чередуются p3 и p4)... если кликаем на тот же набор то он останавливается и запускается сначала. И вот в этих остановках/запусках цикла - проблемы!
И что только не перелопатил return false, .queue(), stop(), unbind(), флаги, if, break, обнуления, даже jQuery.fx.off = true;
.... и либо цикл напроч вырубает, либо ему хоть бы что.... и казалось бы столько разных методов - но без результатно...
Посоветуйте как можно обуздать цикл? Благодарен за любые советы!
Jquery:
function theRotator() {
$('div.rotator ul li').css({opacity: 0.0});/* прозрачность всех картинок */
/* Берем первую картинку и показываем ее (по пути включаем полную видимость) */
$('div.rotator ul li:first').animate({opacity: 1.0}, 700);
setInterval('rotate()',4000);
}
function rotate() {
/* Берем первую картинку */
var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));
/* Берем следующую картинку, когда дойдем до последней начинаем с начала */
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
/* Прячем текущую картинку */
current.removeClass('show')
.animate({opacity: 0.0}, 700, function(){/* эффект затухания картинок, show имеет больший z-index */
next.addClass('show')
.animate({opacity: 0.0}, 500)
.animate({opacity: 1.0}, 700);
});
};
$(document).ready(function() {
theRotator(); /* Запускаем слайдшоу */
/* Кликаем любую li в change_bar */
$('#change_bar li').each(function(index, element){
$(element).on("click", function(){
/* убираем старый div в frame > ul > li */
/* ставим новый div в frame > ul > li */
});
});
});
HTML:
<head>
<style type="text/css">
#frame{
position:absolute;
overflow: hidden;
}
#frame > ul{
position:relative;
}
#change_bar{
position:relative;
}
#change_bar > ul{
position:relative;
}
div.rotator {
position:relative;
}
div.rotator ul li {
position:absolute;
}
div.rotator ul li.show {
z-index:500;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="frame">
<ul>
<li>
<div class="rotator" id="div1">
<ul>
<li class="show"><img src="p1.gif"/></li>
<li><img src="p2.gif"/></li>
</ul>
</div>
</li>
<li>
<div class="rotator" id="div2">
<ul>
<li><img src="p3.gif"/></li>
<li><img src="p4.gif"/></li>
</ul>
</div>
</li>
</ul>
</div>
<div id="change_bar">
<ul>
<li id="c1"> <img src="1.gif"/> </li>
<li id="c2"> <img src="2.gif"/> </li>
</ul>
</div>
</body>