js实现轮播图（手动+自动）

米兰的小铁匠~

已于 2023-08-05 15:17:19 修改

阅读量384

点赞数

文章标签： javascript java 前端

于 2023-08-05 00:51:24 首次发布

本文链接：https://blog.csdn.net/weixin_64704029/article/details/132114422

版权

设置大体样式

图片播放

完整代码

设置大体样式

<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">

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

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

图片播放

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对象，将图片存入数组中，用下标来访问图片内容

var t;
function start(){
	t = setInterval(next,1000)
}
function stop(){
	clearInterval(t);
}

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

function oper(oper){
					document.getElementById("pre").style.opacity=oper;
					document.getElementById("next").style.opacity=oper;
}

设置透明度，当鼠标移入图片时，显示按钮，当鼠标离开图片时，按钮消失

完整代码

<!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);
				}
                function oper(oper){
					document.getElementById("pre").style.opacity=oper;
					document.getElementById("next").style.opacity=oper;
				}
		</script>
        <div onmouseover="oper(0.5)" onmouseout="oper(0)" >	
		<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">
        <div/>
	</body>
</html>

米兰的小铁匠~

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js实现轮播图（手动+自动）

html+css+js实现图片切换，设置自动播放的事件，并添加onmouseover和onmouseout事件，当鼠标放在图片或者按钮上，停止自动播放，离开后开始自动播放。将图片设置为相对定位，按钮设置为绝对定位，这样就可以将按钮镶嵌在图片中。添加dom对象，将图片存入数组中，用下标来访问图片内容。
复制链接

扫一扫