利用js实现轮播图的自动切换

最新推荐文章于 2024-06-06 20:04:13 发布

梦想成为JAVA工程师

最新推荐文章于 2024-06-06 20:04:13 发布

阅读量1.1k

点赞数 4

分类专栏： web 学习收获文章标签： html html5 javascript css3 css

本文链接：https://blog.csdn.net/weixin_45777923/article/details/112724629

版权

web 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

学习

31 篇文章 0 订阅

订阅专栏

收获

28 篇文章 0 订阅

订阅专栏

利用js实现轮播图的自动切换

功能如下：当点击右上角的X后，关闭整个轮播图页面。当点击左右按钮以及上面的导航点时，进行图片的切换，并且整个过程导航点的选中效果相匹配。当光标放在导航点的时候，轮播图的自动播放结束，当移出时，自动播放恢复。
在这里插入图片描述

全部代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<!-- <script src="轮播图.js" type="text/javascript" charset="utf-8"></script> -->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				margin: 30px auto;
				width: 450px;
				height: 300px;
				position: relative;
			}
			.box .img{
				width: 450px;
				height: 300px;
			}
			.pointer{
				position: absolute;
				bottom: 20px;
				left: 20px;
			}
			.pointer li{
				float: left;
				height: 10px;
				width: 10px;
				background-color: #999;
				list-style: none;
				margin-right: 5px;
				border-radius: 50%;
				overflow: hidden;
				border: 2px solid #FAEBD7;
			}
			.active{
				background-color: #FAEBD7 !important;
				border: 2px solid #999 !important;
			}
			.pointer a{
				float: left;
				width: 10px;
				height: 10px;
				margin-right: 5px;
				border-radius: 50%;
				overflow: hidden;
			}
			.left{
				width: 30px;
				height: 50px;
				background-color: #919191;
				position: absolute;
				left: 0px;
				text-align: center;
			}
			.left a{
				width: 100%;
				height: 100%;
				text-decoration: none;
				float: left;
				line-height: 50px;
				font-size: 20px;
				color: white;
			}
			.left a:hover{
				background-color: #5a5a5a;
			}
				background-color: #5a5a5a;
			.right a:hover{
			}
			.right{
				width: 30px;
				height: 50px;
				background-color: #919191;
				position: absolute;
				right:0px;
				text-align: center;
			}
			.right a{
				display: block;
				width: 100%;
				height: 100%;
				text-decoration: none;
				color: white;
				font-size: 20px;
				line-height: 50px;
			}
			.del{
				position: absolute;
				right: 10px;
				top: 5px;
			}
			.del a{
				color: white;
				display:block;
				width: 20px;
				height: 20px;
				background-color: #999999;
				border-radius: 50%;
				overflow: hidden;
				opacity: 0.4;
				color: white;
				text-align: center;
				text-decoration: none;
				line-height: 23px;
			}
			.del a:hover{
				opacity: 1;
			}
	</style>
		<script type="text/javascript">
			window.onload = function(){
				const left = document.querySelector(".left");
				const right = document.querySelector(".right");
				const del = document.querySelector(".del");
				const pointer = document.querySelector(".pointer");
				const liAll = document.querySelectorAll("li");
				const imgArr = ["./img/01.jpg","./img/02.jpg","./img/03.jpg","./img/04.jpg","./img/05.jpg"];
				const img = document.querySelector("#img");
				const box = document.querySelector(".box");
				left.style.top = (box.offsetHeight-left.offsetHeight)/2+"px";
				right.style.top = (box.offsetHeight-left.offsetHeight)/2+"px";
				pointer.style.left = (box.offsetWidth-pointer.offsetWidth)/2+"px";
				let index = 0;
				function style(index){
					for(i in liAll)
					{
						liAll[i].className = '';
					}
					liAll[index].className = "active";
					img.src = imgArr[index];
				};
				left.onclick = function(){
					index--;
					if(index<0)
					{
						index = liAll.length-1;
					}
					style(index);
				};
				right.onclick = function(){
					index++;
					if(index>liAll.length-1)
					{
						index = 0;
					}
					style(index);
				};
				for(i in liAll)
				{
					liAll[i].index = i;
					liAll[i].onmouseover = function(){
						index = this.index;
						console.log(index);
						style(index);
						clearInterval(timer);
					};
					liAll[i].onmouseout = function(){
						timer = setInterval(function(){
							index++;
							index = (index%5);
							style(index);
						},1000);
					};
				}
				let timer;
				timer = setInterval(function(){
					index++;
					index = (index%5);
					style(index);
				},1000);
				del.onclick = function(){
					box.style.display = 'none';
				};
			};
		</script>
	</head>
	<body>
		<div class="box">
			<div class="img">
				<img id="img" src="./img/01.jpg" alt="">
			</div>
			<div class="pointer">
				<ul>
					<li class="active"><a href="javascript:;"></a></li>
					<li><a href="javascript:;"></a></li>
					<li><a href="javascript:;"></a></li>
					<li><a href="javascript:;"></a></li>
					<li><a href="javascript:;"></a></li>
				</ul>
			</div>
			<div class="left">
				<a href="javascript:;">
					<
				</a>
			</div>
			<div class="right">
				<a href="javascript:;">
					>
				</a>
			</div>
			<div class="del">
				<a href="javascript:;">
					X
				</a>
			</div>
		</div>
	</body>
</html>

思路分析与讲解：

首先，我们先做关闭整个轮播图页面的部分。

这里我们需要知道关闭的原理，关闭的原理其实是为css中的display = none，既然知道了它的原理，那么在删除上绑定一个单击响应函数，对应的是使整个部分的display = none。

接下来，做图片的切换。

我在这里用到的方法是先创建一个图片数组，然后创建一个记录下标的数index。向左切换是index–，向右切换是index++,让光标在导航点时，用this指出所选中的导航点的下标，并且用index = this.index 来更新全局中index的值，使其同步。

接下来，同步导航点的样式并且切换图片。

封装一个函数来用设置当前下标下的导航点的样式，并且切换图片

最后，实现自动播放

使用定时器在设定的时间内使其index++，已达到自动播放的效果。当光标在导航点上的时候，用clearInterval()方法关闭定时器，并且在光标移出导航点时，重新打开定时器。

还有不懂的小可爱可以私信我哦~

梦想成为JAVA工程师

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
利用js实现轮播图的自动切换

利用js实现轮播图的自动切换功能如下：当点击右上角的X后，关闭整个轮播图页面。当点击左右按钮以及上面的导航点时，进行图片的切换，并且整个过程导航点的选中效果相匹配。当光标放在导航点的时候，轮播图的自动播放结束，当移出时，自动播放恢复。全部代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图</title> <!-- <
复制链接

扫一扫