Question

我的div有很多像

的图片

<div id="gallery">
    <img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" alt="" />
<img src="images/grass-blades.jpg" alt="Grass Blades" width="580" height="360" title="" alt="" />
<img src="images/ladybug.jpg" alt="Ladybug" width="580" height="360" title="" alt="" />
<img src="images/lightning.jpg" alt="Lightning" width="580" height="360" title="" alt="" />
</div>

我想一次显示一个图像，一段时间后会显示另一个图像，但我的jQuery代码无效。有什么问题

$(document).ready(function () {
    slideShow();
});

function slideShow() {
    $('#gallery img').css({ opacity: 0.0 });
    $('#gallery img:first').css({ opacity: 1.0 });
    setInterval('gallery()', 2000);
}

 function gallery() {
    var current = ($('#gallery img.show') ? $('#gallery img.show') : $('#gallery img').first());
    var next = current.next().length > 0  ? current.next() : $('#gallery img').first();

    next.css({ opacity: 0.0 })
    .addClass('show')
    .animate({ opacity: 1.0 }, 1000);

    current.animate({ opacity: 0.0 }, 1000).removeClass('show');
}

任何人都可以纠正我的代码。感谢

Answer 1

“next”变量被赋予一个不理解jQuery函数的HTMLImageElement。而不是使用

$('#gallery img').get(0)

使用此

$('#gallery img').first()

如果你在所有地方都这样做，它应该工作（至少它在这里）:-)更新的jQuery代码如下：

$(document).ready(function () {
  slideShow();
});

function slideShow() {
    $('#gallery img').css({ opacity: 0.0 });
    $('#gallery img:first').css({ opacity: 1.0 });
    setInterval('gallery()', 2000);
}

function gallery() {
    var current = ($('#gallery img.show') ? $('#gallery img.show') : $('#gallery     img').first());
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery img').first() : current.next()) : $('#gallery img').first());

    next.css({ opacity: 0.0 })
        .addClass('show')
        .animate({ opacity: 1.0 }, 1000);

    current.animate({ opacity: 0.0 }, 1000).removeClass('show');
}

在链中一个接一个地显示图像

1 个答案: