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>
相关推荐
訾博ZiBo5 分钟前
【Vibe Coding】001-前端界面常用布局
前端
软件技术NINI5 分钟前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
IT_陈寒8 分钟前
《Redis性能翻倍的7个冷门技巧,90%开发者都不知道!》
前端·人工智能·后端
一线大码9 分钟前
SpringBoot 优雅实现接口的多实现类方式
java·spring boot·后端
花伤情犹在14 分钟前
Java Stream 高级应用:优雅地扁平化(FlatMap)递归树形结构数据
java·stream·function·flatmap
歪歪10018 分钟前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手20 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
yaoxin52112327 分钟前
212. Java 函数式编程风格 - Java 编程风格转换:命令式 vs 函数式(以循环为例)
java·开发语言
ZYMFZ27 分钟前
python面向对象
前端·数据库·python
长空任鸟飞_阿康32 分钟前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能