一张张淡出图片的html代码

Question

我是新手网站 build 者。我有一些照片想放在我的网站上，我想让它们一张接一张地连续过渡。有人可以向我提供一个 HTML 代码，我所要做的就是包括我已经存档的图片的名称。它们的尺寸不同，但当它们过渡时，我希望它们的尺寸也一样。它们是 jpg 格式。

感谢任何可以提供帮助的人？

Answer 1

你想为此使用 jQuery，这样它会容易得多......我想你的 HTML 看起来像这样(简化):

<div class="images">
    <img src="..." />
    <img src="..." />
    <img src="..." />
    ...
</div>

有许多具有各种功能的图像 slider ，但如果您只需要淡入淡出，那么编写几行代码可能会更容易。

做这样的事情(使用 jQuery):

$(function() {
    var images = $(".images img").hide();
    var current = 0;
    setInterval(function() {
        var next = ((current + 1) % images.length);
        images.eq(current).fadeOut();
        images.eq(next).fadeIn();
        current = next;
    });
});

不要忘记将 CSS 样式设置为:

.images
{
    position: relative;
}
.images img
{
    display: none;
    position: absolute;
}

这是一个 working example每 5 秒旋转一次图像。