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循环插件？它提供了许多功能并且非常易于使用

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

用jquery骑自行车的图像

2 个答案:

更新