一分钟学会js轮播

lm778

已于 2022-10-11 09:22:56 修改

阅读量167

点赞数

分类专栏： JS 文章标签： javascript css css3

于 2022-08-29 19:28:35 首次发布

本文链接：https://blog.csdn.net/m0_59798527/article/details/126590866

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原理与css3高级中的动画一致，在显示的轮播位置定一个div 再用一个框包含图片，图片宽度与最外层定位的div一致，包含图片的框宽度是所有图片宽的总和，利用弹性盒子原理，把图片排成一列，利用定时器，每次移动移动一张图片宽度的距离，初始下标为0，当所有图片轮播完毕，下标再次为0，达到循环。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrapper {
				width: 600px;
				height: 350px;
				overflow: hidden;
				margin: 0 auto;

			}

			img {
				width: 600px;
				height: 350px;
			}

			.contain {
				display: flex;
				width: 3600px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="contain">
				<img src="./imgs/nature-1.jpg" />
				<img src="./imgs/nature-2.jpg" />
				<img src="./imgs/nature-3.jpg" />
				<img src="./imgs/nature-4.jpg" />
				<img src="./imgs/nature-5.jpg" />
				<img src="./imgs/nature-1.jpg" />
			</div>
		</div>
		<script>
			var _wrapper = document.querySelector(".wrapper");
			var index = 0;
			var num = setInterval(function() {
				//滚动一张
				var moveLength = 0; //用标识是否走完一张
				var id = setInterval(function() {
					_wrapper.scrollLeft += 8;
					moveLength += 8
					if (moveLength >= 600) {
						clearInterval(id);
					}
				}, 20) //一张需要2250毫秒
				index++;
				// 走完所有下标和滚动都要从0开始
				if (index >= 6) {
					index = 0;
					_wrapper.scrollLeft = 0;
				}

			}, 3000)
		</script>
	</body>
</html>

在这里插入图片描述
圈住的是定位的框，可以看到多余的图片可通过定位框的 overflow：hidden隐藏
下面是另外一种方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.wrapper {
				width: 600px;
				height: 350px;
				overflow: hidden;
				margin: 0 auto;
				position: relative;
			}

			img {
				width: 600px;
			 height: 350px;
			}

			.contain {
				display: flex;
				width: 3000px;
				position: absolute;
				left: 0;
				top: 0;
			}

			.btn {
				width: 150px;
				display: flex;
				justify-content: space-around;
				position: absolute;
				left: 225px;
				bottom: 10px;
			}

			.btn span {
				display: block;
				width: 15px;
				height: 15px;
				border: 3px solid white;
				border-radius: 50%;
			}

			.wrapper a {
				text-decoration: none;
				font-size: 50px;
				color: red;
				position: absolute;
				top: 35%;
			}

			.wrapper a:nth-of-type(1) {
				left: 10px;

			}

			.wrapper a:nth-of-type(2) {
				right: 10px;
			}

			.active {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="contain">
				<img src="./imgs/nature-1.jpg" />
				<img src="./imgs/nature-2.jpg" />
				<img src="./imgs/nature-3.jpg" />
				<img src="./imgs/nature-4.jpg" />
				<img src="./imgs/nature-5.jpg" />
			</div>
			<div class="btn">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<a href="javascript:void(0);">&lt;</a>
			<a href="javascript:void(0);">&gt;</a>
		</div>
		<script>
			var _wrapper = document.querySelector(".wrapper");
			var _contain = document.querySelector(".contain");
			var _btn = document.querySelector(".btn");
			//下一张按钮
			var _nextPic = document.querySelector(".wrapper a:nth-of-type(2)");
			// 上一张按钮
			var _prevPic = document.querySelector(".wrapper a:nth-of-type(1)");

			var _btn = document.querySelector(".btn");
			//获取所有小圆点
			var _spots = document.querySelectorAll(".btn span");


			// 下一张
			_nextPic.onclick = function() {
				next_pic();
			}
			var index = 0;

			function next_pic() {
				_contain.style.left = _contain.offsetLeft - 600 + "px";
				if (_contain.offsetLeft <= -3000) {
					_contain.style.left = 0;
				}
				index++;
				if (index > 4) {
					index = 0;
				}
				spots();
			}

			// 上一张
			_prevPic.onclick = function() {
				prev_pic();
			}

			function prev_pic() {
				_contain.style.left = _contain.offsetLeft + 600 + "px";
				if (_contain.offsetLeft > 0) {
					_contain.style.left = -2400 + "px";
				}
				index--;
				if (index < 0) {
					index = 4;
				}
				spots();
			}

			//自动轮播
			autoplay();
			var id;

			function autoplay() {
				id = setInterval(function() {
					next_pic();
				}, 2000)
			}

			//小圆点变化
			function spots() {
				for (var i = 0; i < _spots.length; i++) {
					if (i == index) {
						_spots[i].className = "active"
					} else {
						_spots[i].className = ""
					}
				}
			}

			//悬停控制
			_wrapper.onmouseover = function() {
				clearInterval(id);
			}
			_wrapper.onmouseout = function() {
				autoplay();
			}


			//悬浮小圆点更新图片
			_btn.onmouseover = function(event) {
				//获取悬浮的小圆点
				var target = event.srcElement || event.target;
				if (target.nodeName == 'SPAN') {
					//查询小圆点下标
					var n = Array.from(_spots).findIndex(function(tag) {
						return tag == target
					})
					//更新下标
					index = n;
					//更新位移
					_contain.style.left = -600 * n + "px";
					//更新颜色
					spots();
				}
			}
		</script>
	</body>
</html>