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>
相关推荐
解道Jdon2 分钟前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
hzzzzzo016 分钟前
微服务网关全解析:从入门到实践
java·开发语言·微服务
纪莫20 分钟前
技术面:Spring (bean的生命周期、创建方式、注入方式、作用域)
java·spring·java面试⑧股
We....29 分钟前
Java多线程分块下载文件
java·开发语言
不秃的开发媛30 分钟前
Java连接池详解:从Oracle到TiDB的随缘之旅
java·oracle·tidb
慢半拍iii39 分钟前
JAVA Web —— A / 网页开发基础
前端
Pluchon1 小时前
硅基计划3.0 Map类&Set类
java·开发语言·数据结构·算法·哈希算法·散列表
gnip1 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty1 小时前
基于hiprint的票据定位打印系统开发实践
javascript
Angelyb1 小时前
微服务保护和分布式事务
java·微服务·架构