Question

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

我做错了什么？

Answer 1

随机猜测（因为我不知道你做了什么）只有一个<img>显示所有图片，并在点击时将src属性更改为相应的图片在数字上。喜欢

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

点击数字后，您可以使用Jquery更改src。

Answer 2

图像按正常顺序堆叠，因为它们的位置目前是静态或相对的。

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

<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
    }

Answer 3

你说：“图像一个接一个地显示”。

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

在这种状态下，它们可能会看起来很丑陋（除非它们都具有相同的大小），所以你应该隐藏除了你要展示的那个之外的所有内容。只需在CSS表单中将display: none定义为这些图像的默认属性，并将显示的单个属性设置为display: block（通过JavaScript - 它非常简单，您不需要jQuery，如指向由青蛙）。

这是基本方法。

现在，如果你想完成正确的任务，你应该关注禁用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部分。

将图像叠加在另一个之上

3 个答案: