Суть такова. Есть 5 больших картинок, которые отображаются по одной.
<div class="can__twoicons">
<img src="images/icons/b1.png" alt="Картинка" class="can__logo active" id="d1">
<img src="images/icons/b2.png" alt="Картинка" class="can__logo" id="d2">
<img src="images/icons/b3.png" alt="Картинка" class="can__logo" id="d3">
<img src="images/icons/b4.png" alt="Картинка" class="can__logo" id="d4">
<img src="images/icons/b5.png" alt="Картинка" class="can__logo" id="d5">
</div>
А ниже 5 маленьких - которые отображаются все вместе.
<div class="slayicons-small clearfix">
<a href="#" class="can__minlogo b1 shadow" data-numpic="1"></a>
<a href="#" class="can__minlogo b2" data-numpic="2"></a>
<a href="#" class="can__minlogo b3" data-numpic="3"></a>
<a href="#" class="can__minlogo b4" data-numpic="4"></a>
<a href="#" class="can__minlogo b5" data-numpic="5"></a>
</div>
Надо что бы каждые 3 секунды к картинкам по очереди добавлялся к большим класс active, а к маленьким класс shadow.
Соответственно - эти классы должны убираться у предыдущих картинок. И что бы это всё действо:
1. Шло по кругу
2. Останавливалось при наведении курсора мыши на любую из картинок
Я уже с горем пополам (знаний практически 0 в javascript и jQuery) реализовал смену классов при клике следующим образом:
$(document).on('click', '.can__minlogo', function() {
$(this).toggleClass('shadow').siblings().removeClass('shadow');
var iSee = 'd' + $(this).attr('data-numpic');
$('#' + iSee).addClass('active').siblings().removeClass('active');
})
Работает. Правда не знаю на сколько это оптимальный код)) Но хочу ещё увидеть как это дело заставить работать в автоматическом режиме, что бы классы менялись не только по клику но и продолжали меняться каждые 3 секунды.
Заранее спасибо за помощь!
