多幅图片切换的特效

最新推荐文章于 2021-05-24 00:34:16 发布

chaoyv

最新推荐文章于 2021-05-24 00:34:16 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 粗浅文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/chaoyv/article/details/88302625

JS 粗浅专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的多幅图片自动切换显示的特效方法。通过设置定时器每隔一段时间更改图片的显示状态，实现了图片之间的平滑过渡。代码中包含了完整的HTML页面结构和内嵌JavaScript脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>多幅图片切换的特效</TITLE>
<SCRIPT type="text/javascript">
var count=1;
function ppt(){
	for(var i=1;i<5;i++){
		if(count==i){
			document.getElementById("pic"+count).style.display="block";
		}else{
			document.getElementById("pic"+i).style.display="none";
		}
	}
	count++;
	if(count==5){
		count=1;
	}
}
setInterval("ppt()",1800)
</SCRIPT>
</HEAD>
<BODY>
<DIV id="pic1"><img src="images/pic1.jpg" width="400" height="313"></DIV>
<DIV id="pic2" style="display:none"><IMG src="images/pic2.jpg" width="400" height="300"></DIV>
<DIV id="pic3" style="display:none"><IMG src="images/pic3.jpg" width="400" height="300"></DIV>
<DIV id="pic4" style="display:none"><IMG src="images/pic4.jpg" width="400" height="300"></DIV>
</BODY>
</HTML>

效果图：