js制作轮播图

mrcsunflower

已于 2022-11-23 13:44:16 修改

阅读量103

点赞数

分类专栏： js 文章标签： javascript css 前端

于 2022-11-08 11:16:48 首次发布

本文链接：https://blog.csdn.net/qq_45134488/article/details/127747214

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.container {
				width: 500px;
				height: 300px;
				margin: 10px auto;
				overflow: hidden;
				position: relative;
				/* 相对定位 */
			}

			.carousel {
				width: 100%;
				height: 100%;
				display: flex;
				transition: 0.5s;
				/* 0.5s动画 */
			}

			.container .carousel img {
				width: 500px;
				height: 300px;
			}

			.indicator {
				position: absolute;
				/* 绝对定位 */
				bottom: 10px;
				display: flex;
				left: 50%;
				transform: translateX(-50%);
			}

			.indicator span {
				width: 20px;
				height: 20px;
				border: 2px solid #ccc;
				border-radius: 50%;
				margin: 0 3px;
			}

			.indicator span.active {
				background-color: #fff;
				border-color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="carousel">
				<div class="item"><a href=""><img src="./img/bgc-1.jpeg" alt=""></a></div>
				<div class="item"><a href=""><img src="./img/bgc-2.jpeg" alt=""></a></div>
				<div class="item"><a href=""><img src="./img/bgc-3.jpeg" alt=""></a></div>
				<div class="item"><a href=""><img src="./img/bgc-4.jpeg" alt=""></a></div>
			</div>
			<div class="indicator">
				<span class="active"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<script>
				var doms = {
					carousel: document.querySelector('.carousel'),
					indicators: document.querySelectorAll('.indicator span')
				}

				/**
				 * 移动轮播图到第几个板块
				 * @param {Object} index  板块的索引
				 */
				function moveTo(index) {
					doms.carousel.style.transform = `translateX(-${index}00%)`
					// 去除当前选中的指示器
					var active = document.querySelector('.indicator span.active')
					active.classList.remove('active')
					// 重新设置要选中的指示器
					doms.indicators[index].classList.add('active')
				}

				doms.indicators.forEach(function(item, i) {
					item.onclick = function() {
						moveTo(i)
					}
				})
			</script>
		</div>
	</body>
</html>