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>
相关推荐
勤奋的知更鸟15 分钟前
Java 编程之模板方法模式
java·开发语言·模板方法模式
前端小巷子17 分钟前
Web开发中的文件上传
前端·javascript·面试
逸风尊者36 分钟前
开发易掌握的知识:GeoHash查找附近空闲车辆
java·后端
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
碎叶城李白1 小时前
若依学习笔记1-validated
java·笔记·学习·validated
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
都叫我大帅哥1 小时前
🌊 Redis Stream深度探险:从秒杀系统到面试通关
java·redis
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
都叫我大帅哥2 小时前
Redis持久化全解析:从健忘症患者到记忆大师的逆袭
java·redis