html中在一个页面内实现多张图片的轮流播放

最新推荐文章于 2025-07-05 14:19:28 发布

逸然丶诺

最新推荐文章于 2025-07-05 14:19:28 发布

阅读量3w

点赞数 17

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/KevinSilent/article/details/95191157

html 专栏收录该内容

5 篇文章

订阅专栏

博客展示了实现图片轮转的代码，运行时图片可每秒自动转换，也能通过点击上下张按钮转换。还列出项目学习中的知识点，如函数定义、定时器使用、去除浏览器默认边距，以及获取元素方法中id和class的区别。

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

实现图片轮转的代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<style>
			*{
				margin:0;
				padding: 0;
			}
			.box{
				width:1000px;
				height: 600px;
				border:1px solid red;
				margin:auto;
				margin-top:300px;
				background-repeat: no-repeat;
				background-size: cover;
				background-size: 100% 100%;
			}
			/*.box img{
				width: 1000px;
				height: 600px;
			}*/
			#pic{
				width:1000px;
				height:520px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.btn{
				width:120px;
				height:40px;
				margin-top:
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img id="pic" src="imgs/1.jpg" />
		</div>
		<div>
				<input type="button" class="btn"  value="上一张"/>
				<input type="button" class="btn" value="下一张" />
			</div>
		<script>
			var pic=document.getElementById("pic");
			var preBtn=document.getElementsByClassName("btn")[0];
			var nextBtn=document.getElementsByClassName("btn")[1];
//			
			preBtn.onclick=function()
			{
				n--;
				if(n==0)
				{
					n=6;
				}
				pic.src="imgs/"+n+".jpg"
			}
			nextBtn.onclick=function(){
				picLunH();
			}
			var n=1;
			function picLunH(){
				n++;
				if(n==7)
				{
					n=1;
				}
				pic.src="imgs/"+n+".jpg"
				
			}
			setInterval(picLunH,1000);
		</script>
	</body>
</html>

运行效果如下：
在这里插入图片描述
在没有点击下一张和上一张按钮的时候图中的图片会在每隔一秒的时候进行自动的转换。点击上一张和下一张也可以实现图片的转换。
附录：
上述的代码中用到的图片如下。新建一个images，在其中放入任意的六张图片即可：在这里插入图片描述
关于这个项目学习的过程中学到的知识点如下：
A． func 函数名（）{}这个是在代码中定义函数
B． setInterval(函数名，时间)；定时器
C． *{
padding：0；
margin：0；
}
去除浏览器默认的边距，行间距
D.document.getElementById();
document.getElementByClass();两者的区别就是class名字可以是重复的，如果重复了的换得到得就是一个数组，然后通过数组来调用元素。id是唯一的不能重复的，之后得到的对应的元素也是唯一的。