用jQuery循环图像

Question

我有一个简单的HTML列表：

<ul>
    <li>
        <div class="slideshow1">
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
        </div>
    </li>

    <li>
        <div class="slideshow2">
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
        </div>
    </li>
</ul>

我尝试通过以下方法循环遍历图像：

$('.slide1,.slide2').hide();

$.each($('.slide1'), function() {
    $(this).fadeIn().delay(1900).fadeOut();
});

$.each($('.slide2'),function() {
    $(this).fadeIn().delay(1900).fadeOut();
});

但是，它不会逐个图像循环。 一次循环播放多张图像。

我想循环浏览第一个li中的所有图像，然后循环浏览第二个li的图像。

Answer 1

这是因为您一次延迟了所有这些。 每个中的第一个参数是当前索引。

尝试这样的事情：

$.each($('.slide1'),function(i){
     $(this).fadeIn().delay(i*200).fadeOut();
});

这将延迟最后一个200ms

更新资料

您应该真正使用@ShankarSangoli建议的插件，并使其与布局一起使用，但是类似的东西也应该对您有用。 （这尚未经过测试，只是为了帮助您入门）

var _slide1 = $('.slide1');
var _slide2 = $('.slide2');
var_count1 = 0;
var _count2 = 0;

setInterval(function(){
    _slide1[_count1].fadeOut(300);
    _slide2[_count2].fadeOut(300);

    _count1 = _count1 >= _slide1.length ? 0 : _count1+=1;
    _count2 = _count2 >= _slide2.length ? 0 : _count2+=1;

    _slide1[_count1].fadeIn(300);
    _slide2[_count2].fadeIn(300);
}, 2000);

Answer 2

为什么不使用jquery cycle插件？ 它提供了很多功能并且非常易于使用

http://jquery.malsup.com/cycle/