js实现轮播图(手动+自动)

目录

设置大体样式

图片播放

完整代码


设置大体样式

html 复制代码
<input type="button" value="<" id="pre" onclick="pre()" onmouseover="stop()" onmouseout="start()" class="left">
<img src="../img/1.jpg" id="imgid" onmouseover="stop()" onmouseout="start()">
<input type="button" value=">" id="next" onclick="next()" onmouseover="stop()" onmouseout="start()" class="right">

将图片设置为相对定位,按钮设置为绝对定位,这样就可以将按钮镶嵌在图片中

css 复制代码
<style type="text/css">
			#imgs{
				position: relative;
				}
			.right,.left{
				position: absolute;
				top:230px;
				border-radius:50%
			}
			.right{
				left:575px ;
			}
</style>

图片播放

javascript 复制代码
var imgArr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];				
				var index =0 ;		
				
				function pre(){
					var img = document.getElementById("imgid");	
					if(index == 0){
						index = 5;
					}
					index-=1;
					img.src = imgArr[index];
				}
				function next(){
					var img = document.getElementById("imgid");	
					if(index == 4){
						index = -1;
					}
					index+=1;
					img.src = imgArr[index];
}

添加dom对象,将图片存入数组中,用下标来访问图片内容

javascript 复制代码
var t;
function start(){
	t = setInterval(next,1000)
}
function stop(){
	clearInterval(t);
}

设置自动播放的事件, 并添加onmouseover和onmouseout事件,当鼠标放在图片或者按钮上,停止自动播放,离开后开始自动播放

完整代码

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#imgs{
				position: relative;
				}
			.right,.left{
				position: absolute;
				top:230px;
				border-radius:50%
			}
			.right{
				left:575px ;
			}	
		</style>
	</head>
	<body>
		<script>		
				var imgArr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];				
				var index =0 ;		
				
				function pre(){
					var img = document.getElementById("imgid");	
					if(index == 0){
						index = 5;
					}
					index-=1;
					img.src = imgArr[index];
				}
				function next(){
					var img = document.getElementById("imgid");	
					if(index == 4){
						index = -1;
					}
					index+=1;
					img.src = imgArr[index];
				}
				var t;
				function start(){
					t = setInterval(next,1000)
				}
				
				function stop(){
					clearInterval(t);
				}
		</script>	
		<input type="button" value="<" id="pre" onclick="pre()" onmouseover="stop()" onmouseout="start()" class="left">
		<img src="../img/1.jpg" id="imgid" onmouseover="stop()" onmouseout="start()">
		<input type="button" value=">" id="next" onclick="next()" onmouseover="stop()" onmouseout="start()" class="right">
	</body>
</html>
相关推荐
美酒没故事°11 分钟前
npm源管理器:nrm
前端·npm·npm源
用户221520442780012 分钟前
vue3组件间的通讯方式
前端·vue.js
sg_knight24 分钟前
Spring Cloud与RabbitMQ深度集成:从入门到生产级实战
java·spring boot·spring·spring cloud·消息队列·rabbitmq·stream
三十_A29 分钟前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
下位子37 分钟前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒37 分钟前
Vue单文件组件到底需不需要写name
前端·vue.js
用户479492835691538 分钟前
面试官:讲讲2FA 双因素认证原理
前端·后端·安全
乐影39 分钟前
TS 模板字符串类型:从基础到进阶的类型编程魔法
前端·typescript
龙在天40 分钟前
CSS 属性值的计算与过程
前端
云鹤_41 分钟前
【Amis源码阅读】组件注册方法远比预想的多!
前端·低代码