我需要创建一个幻灯片,当我点击1-5中的特定数字时,将显示这些图像。但我面临的问题是图像是一个接一个地显示出来的。因此,如果我隐藏图像1然后显示图像2,则图像2不会显示在图像1的位置,而是显示在图像1的下方。
我做错了什么?
答案 0 :(得分:0)
随机猜测(因为我不知道你做了什么)只有一个<img>
显示所有图片,并在点击时将src
属性更改为相应的图片在数字上。喜欢
<img src="image1.gif" width="32" height="32" />
点击数字后,您可以使用Jquery更改src
。
答案 1 :(得分:0)
图像按正常顺序堆叠,因为它们的位置目前是静态或相对的。
假设图像包含在元素中,即
<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
}
答案 2 :(得分:0)
你说:“图像一个接一个地显示”。
我认为他们在某个容器中 - 可能是<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部分。