Question

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

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

Answer 1

你想使用jQuery这样会更容易......我想你有HTML看起来像这样（简化）：

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

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

做这样的事情（使用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秒就会旋转一次图像。

Answer 2

您要找的不是HTML代码，而是Javascript（或CSS）代码。我建议你查看有关图像滑块和图库如何工作和结构化的教程。使用jQuery Javascript库特别简单。

我查了几个简单的滑块和画廊的链接，你可以尝试理解和实现：

http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/

http://www.tripwiremagazine.com/2010/10/20-stunning-jquery-image-sliders-and-tutorials-for-creating-your-own.html

用于逐个淡化图片的HTML代码

2 个答案: