将图像一个叠在另一个上面

Stack images one above the other

本文关键字：另一个 一个 图像      更新时间：2023-09-26

我需要创建一个图像幻灯片，当我点击从1-5的特定数字时将显示。但问题是，我所面临的是，图像正在显示一个接一个。如果我隐藏图像1，然后显示图像2，图像2不会显示在图像1的位置，而是显示在图像1的下方。

我做错了什么?

你说:"图像正在一个接一个地显示"

我假设它们在某个容器中-可能是<div>。设置此容器的CSS属性为position: relative，设置图像的CSS属性为position: absolute; top: 0; left: 0。这将有助于你的图像被放置一个接一个-他们将被堆叠在同一个地方。

在这种状态下，它们可能看起来很丑(除非它们都有相同的大小)，所以你应该隐藏所有的，除了你想显示的那个。只需在CSS表中定义display: none作为这些图像的默认属性，并将显示的单个属性设置为display: block(通过JavaScript -这很简单，您不需要jQuery，正如Frog指出的那样)。

这是最基本的方法。

现在，如果你想完成任务右，你应该注意那些禁用了JavaScript的用户(至少我会感激这一点;-)

定义页面的默认布局，这样没有JavaScript的用户就可以看到所有的图像，一个挨着一个。你已经有了。

现在，当你的页面在浏览器中呈现时，JavaScript可以工作，让你的脚本在容器上设置一个类(我通常使用类"live")，并定义另一组CSS规则来在一个地方显示图像(position: absolute和display: none)，并检查第一个图像为可见(例如给它一个类"可见")。

现在，当用户点击某种"下一步"按钮时，你的JavaScript只需要从"旧"图像中删除"可见"类，并将其设置为"新"图像。

HTML的一个例子:

<div id="slideshow"><img ../><img ../></div>

和CSS的基本属性:

#slideshow { ... } /* noscript */
#slideshow.live {  /* script */
  position: relative;
  height: ..;
  width: ..;
}
#slideshow img { ... } /* noscript */
#slideshow.live img { /* script */
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
#slideshow.live img.visible { /* script + choosen one */
  display: block;
}

我相信你会知道如何编写JavaScript部分

随机猜测:(因为我不知道你做了什么)当你点击数字时，只需要一个<img>来显示所有图像并将src属性更改为相应的图像。像

<img src="image1.gif"  width="32" height="32" />

你可以使用Jquery改变src当点击数字

由于图像当前的位置不是静态的就是相对的，所以这些图像会按照正常的顺序堆叠。

假设图像包含在元素中，即 

<div id="slideshow">
    <img... />
    <img... />
    <img... />
    <img... />
</div>

您需要将#slideshow元素设置为使用相对定位，并将图像设置为使用绝对定位。

#slideshow {
    position: relative;
}
    #slideshow img {
        display: block; // removes ugly gap on the bottom
        position: absolute; // the magic
        top: 0; left: 0; // positions in top left corner
    }
相关文章：