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

最新推荐文章于 2024-07-21 19:19:20 发布
最新推荐文章于 2024-07-21 19:19:20 发布
阅读量2.9w 收藏 97
点赞数 17
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KevinSilent/article/details/95191157
版权

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

<!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是唯一的不能重复的，之后得到的对应的元素也是唯一的。

逸然丶诺
关注
  • 17
    点赞
  • 踩
  • 97
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
html 一轮多图轮播,通过html+css3实现图片轮播切换
weixin_42116058的博客
06-17 4949
摘要：图片轮播切换是网站banner图常用的功能，很多网站的这个功能都是通过js来实现的，自从css3新增动画功能后，图片轮播切换不需要js也可以实现了。 图片轮播切换是网站banner图常用的功能，很多网站的这个功能都是通过js来实现的，自从css3新增动画功能后，图片轮播切换不需要js也可以实现了。下面就让我们来看看如何只通过html+css3实现图片轮播切换效果。html代码：html...
html中多个图片轮播代码怎么写,Html5如何快速在页面中写出多个轮播图效果
weixin_42513448的博客
05-31 1724
我们在做项目的过程中，有时候客户需求要求你在同一个页面中，写几个不同样式的轮播图效果，那么如何快速实现呢？(要知道若果你每个轮播图都要用原生javascript写的话，会很麻烦，代码也不够简洁)这里我们就可以借助插件来实现这一功能，swiper.js就是一个专门处理轮播图效果的js库,下面举例来说明：小米防丢器 遥控自拍解放双手、释放激情解放你的双手，给你充分的空间摆...
多张图片轮播和展示的几种常见效果写法
热门推荐
qq_40927742的博客
07-28 1万+
1、几张图片计时器轮播 <!-- css样式--> <style type=“text/css”> .banner{ width: 100%; height: 350px; overflow: hidden; } .banner img{ width:100%; } </style> <div class="banner...
html+css+js轮播图(以考试系统首页为例）
最新发布
l7_804829222的博客
07-21 226
vscode下载方式，以及常用插件，在。
html 多张图片轮播
11-30
html 多张图片轮播，html 幻灯片
html图片重叠轮播,HTML5--图片轮播多张展示
weixin_35599836的博客
05-30 1989
图片轮播，多张效果：HTML5--图片轮播html,body{padding:0px;margin:10px auto;}#warpper{width:1120px;/*一列展示几个的宽度 ,4*280 动态算*/height:150px;margin:0 auto;position:relative;overflow:hidden;border:1px solid red;}#inner{/*元...
html多张图片组合轮播,01.html · jecson/多张图片视图一直动轮播图 - Gitee.com
weixin_39730801的博客
06-07 201
*{padding: 0;margin: 0;}div{position: relative;margin: 0 auto;overflow: hidden;}ul{position: absolute;left: 0;}li{float: left;list-style: none;box-sizing: border-box;border: 1px solid red;}img{width: ...
HTML 图片轮播
weixin_62026595的博客
03-09 3096
来个简单的图片轮播效果吧
html实现多张图片拼接,html中在一个页面内实现多张图片的轮流播放-Go语言中文社区...
weixin_33507732的博客
06-04 727
实现图片轮转的代码如下：轮播图*{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%;}...
通过原生jquery实现图片轮流播放
02-17
在网页设计中，轮播图（Carousel）是一种常见的展示多张图片或内容的方式，它可以自动循环播放，为用户提供动态的视觉体验。本教程将聚焦于如何利用原生jQuery实现一个简单的图片轮流播放功能。 首先，我们需要理解...
jquery 实现 图片轮流播放
09-07
在网页设计和开发中，jQuery 是一个非常流行的 JavaScript 库，它简化了DOM操作、事件处理、动画制作等任务。本篇文章将详细讲解如何使用jQuery实现图片轮流播放的效果，这通常被称为图片轮播或幻灯片展示。 首先，...
html图片无缝循环滚动
11-28
图片无缝循环滚动，可自己修改方向
html实现图片滚动
07-09
web页面效果，JS实现图片滚动，做页面效果蛮不错的，里面的代码可以借鉴，可以扩展知识点。
html好看的图片轮播多种风格（源码）
10-17
多种轮播效果图，支持配置，可以自动切换，鼠标拖动，角标按钮切换，不一样的切换效果，可以直接嵌入项目使用，简单灵活。 示例地址：https://blog.csdn.net/weixin_43151418/article/details/125842089
利用HTML和JavaScript实现图片的自动播放
12-17
使用HTML和JavaScript对图片的全屏自动播放
多张图片轮播 js+css
04-09
菜单导航 其它广告代码 影音播放 Flash图片轮播 JS图片轮播 飘浮广告 时钟日历 ...可通过鼠标移动变换局部图片的js相册展示广告特效代码
3D多图轮流播放jQuery特效.zip
12-29
此特效主要用于展示多张图片，通过3D变换效果使图片在页面上循环播放，创造出立体、动态的展示形式，吸引用户注意力。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互...
超详细解释:使用定时器实现轮播图效果(HTML、CSS、JavaScript)
weixin_56296642的博客
10-02 1859
超详细解释使用HTML、CSS、Javascript运用定时器知识实现轮播图效果
html 轮播_js+html实现简单的图片轮播
weixin_39919195的博客
12-01 1689
1.js代码var index=0; function changeimg(){ //获取要切换的图片 var img=document.getElementById("img1"); //计算到切换到那张图片 var count=index%3+1; img.src="img/"+count+".jpg"; //切换一个index+1 index=index+1; } function i...
综合运用HTML、CSS、JavaS使用HTML、CSS和JavaScript进行实现。 结构上至少包含两个网页，网站主页上要有导航栏、主要内容和页脚三部分。 导航栏上具有菜单，相应功能要能够实现。 主要内容中要有图片元素，要求实现图片的轮流播放功能。
05-28
好的，根据您的实验要求，我可以为您提供一些具体的实现步骤和代码示例： 1. 创建HTML文档结构，包含两个网页，分别为index.html和gallery.html。 2. 在index.html中，设计导航栏、主要内容和页脚三部分，导航栏中包含菜单。 3. 在gallery.html中，设计图片展示页面，包含图片轮播功能。 4. 使用CSS样式表为HTML文档添加样式，美化页面布局和外观。 5. 使用JavaScript编写图片轮播功能的代码，实现图片的自动播放和切换。 以下是示例代码： index.html ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站主页</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> </header> <main> <h1>欢迎来到网站主页</h1> <p>这里是网站的主要内容区域，可以放置一些介绍性的文字和图片。</p> <img src="image1.jpg" alt="图片1"> <img src="image2.jpg" alt="图片2"> </main> <footer> <p>版权所有 © 2021 网站名称</p> </footer> </body> </html> ``` gallery.html ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片展示页面</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> </header> <main> <h1>图片展示页面</h1> <div class="slider"> <img src="image1.jpg" alt="图片1"> <img src="image2.jpg" alt="图片2"> <img src="image3.jpg" alt="图片3"> <img src="image4.jpg" alt="图片4"> </div> </main> <footer> <p>版权所有 © 2021 网站名称</p> </footer> </body> </html> ``` style.css ``` header { background-color: #333; color: #fff; padding: 20px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #fff; text-decoration: none; } main { padding: 20px; } footer { background-color: #333; color: #fff; padding: 20px; } .slider { width: 500px; height: 300px; overflow: hidden; position: relative; } .slider img { width: 500px; height: 300px; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slider img.active { opacity: 1; } ``` script.js ``` var sliderIndex = 0; var sliderTimer; function showSlider() { var slides = document.querySelectorAll('.slider img'); for (var i = 0; i < slides.length; i++) { slides[i].classList.remove('active'); } sliderIndex++; if (sliderIndex > slides.length) { sliderIndex = 1; } slides[sliderIndex - 1].classList.add('active'); sliderTimer = setTimeout(showSlider, 3000); } showSlider(); ``` 这份代码仅供参考，您可以根据实际情况进行修改和完善。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值