html中,如何动态显示几个图片,就是从左到右依次显示5张图片

发布网友发布时间：2022-04-23 04:11

我来回答

共4个回答

热心网友时间：2022-04-20 10:46

1、新建一个html文件，命名为test.html，在test.html文件内，使用img标签创建一张图片，图片是images文件夹下面的1.jpg。

2、为了展示隐藏图片后的效果，在img标签的外部使用div标签，同时设置div标签的class属性为mydiv。

3、在test.html文件内，编写<style type="text/css"></style>标签，页面的css样式将写在该标签内。

4、在css标签内，设置类名为mydiv的样式，使用border设置div的边框为1px的灰色边框，使用width设置div的宽度为300px，使用height设置div的高度为300px。

5、在css标签内，对img元素进行样式设置，将display属性设置为none，实现图片的隐藏。

6、在浏览器打开test.html文件，查看实现的效果。

热心网友时间：2022-04-20 12:04

用js+css来实现。下面是两张图片的显示。
<html>
<head>
<title>图片的显示</title>
<style type="text/css">

</style>
<script>
function showbg1(){
document.getElementById("bg1").style.display="block";
document.getElementById("bg2").style.display="none";

}
function showbg2(){
document.getElementById("bg1").style.display="block";
document.getElementById("bg2").style.display="block";
}
</script>
</head>

<body>
<div id="bg1"><img src="mao.jpg" width="160" height="180" />
<div id="bg2"><img src="haitun.jpg" width="160" height="180" /></div>
</div>

<p> </p>
<div id="b1" onmousemove="showbg1()"><img src="b1.png" width="22" height="20" /></div>
<div id="b2" onmousemove="showbg2()"><img src="b2.png" width="18" height="19" /></div>
</body>
</html>追问就像这2张图片的，b1和b2，b2显示要比b1延迟一点，0.3秒吧，后面再有图片，用DIV分的，就这样依次都有延迟，就像是动态的从左向右显示的，能不能做出这个效果呢？

追答暂时做不出来如果有了答案麻烦通知一下谢谢

热心网友时间：2022-04-20 13:39

这是我截取的一小段：

<marquee width="968" height="180" onMouseOver= stop() onMouseOut=start() scrollamount="3" loop=infinte deplay="0">
<a href="#"><img src="index4/1_small.jpg"></a>
<a href="#"><img src="index4/2_small.jpg"></a>
<a href="#"><img src="index4/3_small.jpg"></a>
<a href="#"><img src="index4/4_small.jpg"></a>
<a href="#"><img src="index4/5_small.jpg"></a>
</marquee>
实际上用的是html中的marquee，具体的marquee的用法可以去百度，我就不细说了。

热心网友时间：2022-04-20 15:30

懒人上有