Здравствуйте!
Помогите, пожалуйста, решить задачку. Есть 3 блока, в каждом из блоков есть изображения. Нужно, чтобы изображения выводились поочередно.
У меня получается вывести первые изображения с каждого блока поочередно, но на следующей волне смены картинок, они идут вразнобой.
HTML:
<div id="slideshow-1" class="js_multiSlide">
<a href="/link-1.html">
<ul>
<li><img src="images/gallery-index/1/1.jpg" alt="image" class="active" /></li>
<li><img src="images/gallery-index/1/2.jpg" alt="image" /></li>
<li><img src="images/gallery-index/1/3.jpg" alt="image" /></li>
</ul>
</a>
</div>
<div id="slideshow-2" class="js_multiSlide">
<a href="/link-2.html">
<ul>
<li><img src="images/gallery-index/2/1.jpg" alt="image" class="active" /></li>
<li><img src="images/gallery-index/2/2.jpg" alt="image" /></li>
<li><img src="images/gallery-index/2/3.jpg" alt="image" /></li>
</ul>
</a>
</div>
<div id="slideshow-3" class="js_multiSlide">
<a href="/link-3.html">
<ul>
<li><img src="images/gallery-index/3/1.jpg" alt="image" class="active" /></li>
<li><img src="images/gallery-index/3/2.jpg" alt="image" /></li>
<li><img src="images/gallery-index/3/3.jpg" alt="image" /></li>
</ul>
</a>
</div>
jQuery:
setInterval(function() {
var $active = $('#slideshow-1 img.active');
if ( $active.length == 0 ) $active = $('#slideshow-1 img:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow-1 img:first');
$active.addClass('last-active');
$next.css({opacity: 0})
.addClass('active')
.animate({opacity: 1}, 1000, function() {
$active.removeClass('active last-active');
});
}, 2000);
setInterval(function() {
var $active = $('#slideshow-2 img.active');
if ( $active.length == 0 ) $active = $('#slideshow-2 img:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow-2 img:first');
$active.addClass('last-active');
$next.css({opacity: 0})
.addClass('active')
.animate({opacity: 1}, 1000, function() {
$active.removeClass('active last-active');
});
}, 3000);
setInterval(function() {
var $active = $('#slideshow-3 img.active');
if ( $active.length == 0 ) $active = $('#slideshow-3 img:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow-3 img:first');
$active.addClass('last-active');
$next.css({opacity: 0})
.addClass('active')
.animate({opacity: 1}, 1000, function() {
$active.removeClass('active last-active');
});
}, 4000);