Как подчинить себе цикл
Здравствуйте, кодопроизводители! Низачто не могу догадаться как останавливать в нужный момент цикл, и запускать его для нужного селектора!
Ситуация такая... в окне "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>
|
Цитата:
|
Цитата:
|
BETEPAH, кстати да! Спасибо что напомнили! Совсем из головы он вылетел.... был у меня один замечательный код с использованием clearInterval.
Щас будем пробовать. |
BETEPAH, Спасибо, пока получается! Вам +1...
..но если не сложно - еще один вопрос: код изначально рассчитан был на один ID , но нужно применить его к нескольким элементам с общим классом... в том месте где мне нужно запустить код смены я пишу $("#frame li").each(theRotator); т.е. для каждого элемента, но тогда в коде rotate() нужно как то указать что выбор идет через текущий элемент, т.е. видимо через $(this)... но саму суть выражения (по которому идет селект) я не понимаю:
var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));
и что-то не могу найти разъяснение.... Т.е. этот current должен зависеть от кликнутого во #frame <li>. Подскажите как вставить this.... или что это за конструкция после current... или хотя бы прошу ссылку на раздел в учебнике о такой конструкции? Спасибо! |
Собственно сам нашел объяснение конструкции, она называется "Тройной оператор"
... кому интересно, это упрощенный способ условного присваивания значений переменным.... суть: a ? b : с если a = true , то возвращается b, если нет то возвращается с ...т.е. это тоже что if () { } else{ } |
Цитата:
http://javascript.ru/cond |
Цитата:
В итоге вышел непосредственно на книжку в которой этот код со СлайдШоу и был, там благо все разъяснялось по сути. Но это уже через столько времени :( Т.е. по факту что такому чуваку как я делать если возник подобный вопрос? выход - смотреть в эту тему, в 6 ответ (который конечно школярский, не спорю).... но ведь часто бывает что есть похожий вопрос на форуме, который так и остался без ответа... и гадаешь то ли автор до сих пор "в дураках", то ли сам решил, но другим не дает?... а это не есть "кодеры всех стран дуинг cucha"! |
ksa,
для лучшего понимания (себе) хочу расписать через if / else вот эту строчку из кода:
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.rotator ul li:first') :current.next()) : $('.rotator ul li:first'));
но мой вариант что-то не аналогичен ей, можете подсказать что не так? Мой вариант:
var next = function(){
if (current.next().length){
if (current.next().hasClass('show')) {
$('.rotator ul li:first');
}
else{
current.next();
}
}
else{
$('.rotator ul li:first');
}
};
|
Цитата:
|
| Часовой пояс GMT +3, время: 06:07. |