原生JS实现简单的图片轮播效果

沐小侠

已于 2022-03-04 14:06:01 修改

阅读量455

点赞数

分类专栏： HTML+CSS+JS 文章标签： css html javascript 前端

于 2022-03-04 11:17:40 首次发布

本文链接：https://blog.csdn.net/weixin_41092938/article/details/123272454

版权

HTML+CSS+JS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

需求：

图片会自动播放，即有一个图片轮播效果，当窗口获取焦点时，停止自动播放效果。
在左右两侧各有一个箭头，分别指的是向左和向右切换，即点击相应的位置就会切换到该图片之前(或之后)的一张图片。
在图片的下方有一排圆，点击圆时就切换到对应的图片。

实现代码：
HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href='banner.css' rel="stylesheet" type="text/css"/>
	</head>
	<body>
		<div id="banner">
			<ul class="img">
				<li style="display: block;"><a href="#"><img src="img/1.jpg"></a></li>
				<li><a href="#"><img src="img/2.jpg"></a></li>
				<li><a href="#"><img src="img/3.jpg"></a></li>
				<li><a href="#"><img src="img/4.jpg"></a></li>
				<li><a href="#"><img src="img/5.jpg"></a></li>
			</ul>
			<ul class="num">
				<li class="active">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
			<a href="javascript:;" class="arrow left">&lt;</a>
			<a href="javascript:;" class="arrow right">&gt;</a>
		</div>
		<script src='js/banner.js' type='text/javascript'></script>
	</body>
</html>

CSS部分

		  * {
				margin: 0;
				padding: 0;
			}

			ul li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			#banner {
				width: 720px;
				height: 360px;
				margin: 20px auto;
				position: relative;
			}

			.img>li {
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}

			.img img {
				width: 720px;
				height: 360px;
			}

			.num {
				position: absolute;
				left: 39%;
				bottom: 10px;
			}

			.num>li {
				display: inline-block;
				width: 25px;
				height: 25px;
				border-radius: 100%;
				background-color: #666;
				text-align: center;
				line-height: 25px;
				color: #fff;
				font-weight: 500;
				cursor: pointer;
			}

			/* 左右箭头 */
			.arrow {
				display: inline-block;
				width: 30px;
				height: 60px;
				background-color: rgba(0, 0, 0, 0.3);
				position: absolute;
				top: 39%;
				font-size: 24px;
				color: #fff;
				line-height: 60px;
				text-align: center;
				display: none;
			}

			#banner:hover .arrow {
				display: block;
			}

			.left {
				left: 0;
				border-top-right-radius: 60px;
				border-bottom-right-radius: 60px;
			}

			.right {
				right: 0;
				border-top-left-radius: 60px;
				border-bottom-left-radius: 60px;
			}

			.num .active {
				background-color: #f00;
			}

JS部分

			//获取元素
			var bannerEle = document.querySelector('#banner');
			var imgEles = document.querySelectorAll('.img>li');
			var numEles = document.querySelectorAll('.num>li');
			var leftEle = document.querySelector('.left');
			var rightEle = document.querySelector('.right');

			//计数变量
			var index = 0;
			var interval = setInterval(run, 2000);
			/* 图片会自动播放，即有一个图片轮播效果，
			当窗口获取焦点时，停止自动播放效果。 */
			bannerEle.onmouseover = function() {
				clearInterval(interval)
			}
			bannerEle.onmouseout = function() {
				interval = setInterval(run, 2000);
			}
			/* 
			 在左右两侧各有一个箭头，分别指的是向左和向右切换，
			 即点击相应的位置就会切换到该图片之前(或之后)
			 的一张图片。
			 */
			leftEle.onclick = function() {
				index--;
				if (index < 0) {
					index = imgEles.length - 1
				}
				changeImg();
			}
			rightEle.onclick = function() {
				run();
			}
			/* 在图片的下方有一排圆，点击每一个圆形就切换到对应的图片。*/
			var numEle = document.querySelector('.num');
			//事件委托（事件冒泡原理）
			numEle.onclick = function(e){
				index = e.target.innerText-1
				changeImg();
			}
			// for (var i = 0; i < numEles.length; i++) {
			//  numEles[i].id = i;
			// 	numEles[i].onclick = function() {
			// 		index = this.id;
			// 		changeImg();
			// 	}
			// }

			function run() {
				index++;
				if (index >= imgEles.length) {
					index = 0;
				}
				changeImg();
			}

			function changeImg() {
				for (var i = 0; i < imgEles.length; i++) {
					imgEles[i].style.display = 'none';
					numEles[i].className = '';
				}
				imgEles[index].style.display = 'block';
				numEles[index].className = 'active';
			}

图片资源：

欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…

沐小侠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JS实现简单的图片轮播效果

需求：图片会自动播放，即有一个图片轮播效果，当窗口获取焦点时，停止自动播放效果。在左右两侧各有一个箭头，分别指的是向左和向右切换，即点击相应的位置就会切换到该图片之前(或之后)的一张图片。在图片的下方有一排圆，点击圆时就切换到对应的图片。实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style>
复制链接

扫一扫