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

需求:

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

实现代码:
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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沐小侠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值