Пройтись по каждому элементу добавляя класс с интервалом?

Question

[m325]

Имеется такая разметка :

<ul class="warrper_bb" >
		<li class="container_bb"  id="banner_bb">
			<p class="contain_bb"  id="brand_present"></p>
		</li>
		<li class="container_bb"  id="woman_no_blur">
			<p class="contain_bb" id="brand_slogan1"></p>
		</li>
		<li class="container_bb" id="bb_big_product_bg">
			<p class="contain_bb" id="bb_big_box"></p>
			<p class="contain_bb" id="brand_slogan2"></p>
		</li>
		<li class="container_bb" id="bb_md_product_bg">
			<p class="contain_bb" id="bb_md_box"></p>
			<p class="contain_bb" id="brand_prasent2"></p>
			<p class="contain_bb" id="brand_slogan3"></p>
		</li>
		<li class="container_bb" id="bb_bg_magazin">
			<p class="contain_bb" id="bb_only_magazin"></p>
			<p class="contain_bb" id="bb_magnit"></p>
		</li>
	</ul>

Нужно начать с первого элемента .container_bb, добавлять класс .show к следующему .container_bb а в предыдущем удалять .show в cписке. C интервалом 5 секунду.

Пробывал, так :

$(document).ready(function(){
	function rotated() {
	// Устанавливаем прозрачность всех картинок в 0
	$('.container_bb').css({opacity: 0.0});
 
	// Берем первую картинку и показываем ее (по пути включаем полную видимость)
	$('.container_bb:first').css({opacity: 1.0});
 }
	setInterval(rotated(),5000);
		
		});

Подскажите как правильно это реализовать на jQuery ?
P.S. Только изучаю jQuery

Answer 1

[Тимофей]

$('.container_bb').each(function(i, el) {
setTimeout(function() { $(el).addClass('show'); }, i * 5000);
});

Comments

[m325]

Тимофей, спасибо. Можно, чтобы у предыдущего элемента удалялся класс .show ?

[Тимофей]

m325: Можно - запоминай просто последний элемент в отдельную переменную и убирай у него класс.

[m325]

Тимофей: Как запомнить последний элемент ?

[m325]

$(el:last).removeClass('show'); ?

[Тимофей]

Давай я тебе просто дам решение, так как ты пока слишком мало знаешь, раз такие вопросы задаешь, но разобраться в этом всем тебе все равно нужно будет)

var lastEl;
$('.container_bb').each(function(i, el) {
    setTimeout(function() {
        if (lastEl) lastEl.removeClass('show');
        lastEl = $(el).addClass('show');
    }, i * 5000);
});

[m325]

Тимофей: Спасибо, Тимофей ! Можно немного помучаю своими глупыми вопросами. Я так понимаю each это как перебор массива ? i это количество .container_bb - это тоже самое как $('.container_bb').length, а el, это что то типа index элемента.

[Тимофей]

m325: Попал только с each)
i - просто индекс элемента, порядковый номер, начинающийся с нуля
el - очередной элемент DOM, над которым мы совершаем какие-то действия.

А мучать вопросами меня бессмысленно. Дело не в том, что я не хочу отвечать, а в том, что я не смогу дать должного объема знаний и, что не менее важно, опыта. Ты же, очевидно, не обладаешь ни тем, ни другим, поэтому лучше бы начать с чего-то более фундаментального, чем вывод слайдера на странице. С ходу могу порекомендовать книгу Флэнагана (JavaScript The Definitive Guide она вроде бы называется, есть на русском).

[m325]

Тимофей: Тимофей подскажите пожалуйста. Сделал из вашего кода функцию.
function rotated(){
var lastEl;
$('.container_bb').each(function(i, el) {
setTimeout(function() {
if (lastEl) lastEl.removeClass('show');
lastEl = $(el).addClass('show').fadeIn('fast');
}, i * 2300);
setInterval($('.container_bb').removeClass('show'),12500);
});
}

Как мне ее заставить повторять себя N количество раз.

[m325]

setInterval(rotated(),15000); не срабатывает

[Тимофей]

m325: потому что ты в setInterval не передаешь функцию rotated, а передаешь результат ее выполнения. Нужно не setInterval(rotated(), ...), а setInterval(rotated/* тут нет скобок */, ...).