javascript - 使用 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 中的第一个参数是当前索引。

尝试这样的事情:

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

这将使每个延迟 200 毫秒，与上一个相比

更新

你真的应该使用@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);