当前位置：网站首页>学习探索-无缝轮播图

学习探索-无缝轮播图

2022-07-06 11:32:00 【miao_zz】
无缝轮播图

- 效果图
- 代码块
效果图

在这里插入图片描述
代码块

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

			.carousel-container {
				width: 400px;
				position: relative;
				margin: 40px auto;
				overflow: hidden;
			}

			.carousel-list {
				width: 100%;
				height: 100%;
				display: flex;
				position: relative;
			}

			.carousel-items {
				width: 100%;
				height: 100%;
			}

			.carousel-items img {
				width: 100%;
				height: 100%;
				display: block;
			}

			.carousel-arrow {
				border-radius: 50%;
				width: 40px;
				height: 40px;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background-color: rgba(0, 0, 0, 0.3);
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 12px;
				cursor: pointer;
			}

			.carousel-arrow:hover {
				font-size: 16px;
			}

			.carousel-arrow-left {
				left: 50px;
			}

			.carousel-arrow-right {
				right: 50px;
			}

			.indicator {
				position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
			}

			.indicator span {
				border: 1px solid #00a2ef;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				display: inline-block;
				cursor: pointer;
			}

			.indicator-current {
				background-color: #00a2ef;
			}
		</style>
	</head>
	<body>
		<div class="carousel-container">
			<div class="carousel-list">
				<div class="carousel-items">
					<img src="img/8.jpg" />
				</div>
				<div class="carousel-items">
					<img src="img/9.jpg" />
				</div>
				<div class="carousel-items">
					<img src="img/10.jpg" />
				</div>
				<div class="carousel-items">
					<img src="img/11.jpg" />
				</div>
			</div>
			<div class="carousel-arrow carousel-arrow-left">&Lt;</div>
			<div class="carousel-arrow carousel-arrow-right">&Gt;</div>
			<div class="indicator">
				<span class="indicator-current"></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		const doms = {
			carouselBoxWidth: document.querySelector(".carousel-container").clientWidth, //获取轮播图可视区域的宽度
			carouselList: document.querySelector(".carousel-list"),
			arrowLeft: document.querySelector(".carousel-arrow-left"),
			arrowRight: document.querySelector(".carousel-arrow-right"),
			indicators: document.querySelectorAll(".indicator span"),
			currentIndex: 0, //下标从0开始
		}
		init();

		function init() {
			//复制第一张图
			const first = doms.carouselList.firstElementChild.cloneNode(true);
			//复制最后一张图
			const last = doms.carouselList.lastElementChild.cloneNode(true);

			//将第一张图放到末尾
			doms.carouselList.appendChild(first);
			//将最后一张图放到第一张,
			/**
			 * insertBefore() 方法可在已有的子节点前插入一个新的子节点。
			 * 语法:
			 *	insertBefore(newnode,node);
			 *	参数:
			 *	newnode: 要插入的新节点。
			 *	node: 指定此节点前插入节点。
			 * **/
			doms.carouselList.insertBefore(last, doms.carouselList.firstElementChild);
			//设置包裹轮播内容块的宽度,
			//document.querySelector(".carousel-list").childElementCount,要放在插入节点的后面，才能获取最新的节点个数
			const childElementCount = document.querySelector(".carousel-list").childElementCount;
			//给轮播图外框设置宽度，用于包裹所有轮播块
			doms.carouselList.style.width = doms.carouselBoxWidth * childElementCount + 'px';

			doms.carouselList.style.transform = `translateX(-${doms.carouselBoxWidth}px)`;
		}
		//轮播图渲染
		function moveTo(index) {
			doms.carouselList.style.transform = `translateX(-${(index+1)*doms.carouselBoxWidth}px)`;
			doms.carouselList.style.transition = '0.5s';

			//去掉指示器的选中效果
			let active = document.querySelector(".indicator span.indicator-current");
			active.classList.remove("indicator-current");
			//添加选中的指示器
			doms.indicators[index].classList.add("indicator-current");

			doms.currentIndex = index;
		}
		//轮播图重置渲染效果
		function resetMoveTo(index) {
			doms.carouselList.style.transform = `translateX(-${(index+1)*doms.carouselBoxWidth}px)`;
			doms.carouselList.style.transition = 'none';
			//去掉指示器的选中效果
			let active = document.querySelector(".indicator span.indicator-current");
			active.classList.remove("indicator-current");
			//添加选中的指示器
			doms.indicators[index].classList.add("indicator-current");

			doms.currentIndex = index;
		}
		//点击指示器
		doms.indicators.forEach((item, index) => {
			item.addEventListener("click", () => {
				moveTo(index)
			})
		})
		//点击向左箭头
		doms.arrowLeft.addEventListener("click", () => {
			const total = doms.indicators.length;
			if (doms.currentIndex === 0) {
				//无缝轮播
				//resetMoveTo(total - 1);等效于下面
				doms.carouselList.style.transform = `translateX(-${(total)*doms.carouselBoxWidth}px)`;
				doms.carouselList.style.transition = 'none';
				doms.carouselList.clientHeight; //强制渲染
				moveTo(total - 1)
			} else {
				moveTo(doms.currentIndex - 1)
			}
		})
		//点击向右箭头
		doms.arrowRight.addEventListener("click", () => {
			const total = doms.indicators.length;
			if (doms.currentIndex === total - 1) {
				//无缝轮播
				//resetMoveTo(0);等效于下面
				doms.carouselList.style.transform = `translateX(-${(0+1)*doms.carouselBoxWidth}px)`;
				doms.carouselList.style.transition = 'none';
				doms.carouselList.clientHeight; //强制渲染
				moveTo(0)
			} else {
				moveTo(doms.currentIndex + 1)
			}
		})
	</script>
</html>
JavaScript基础学习网站
原网站
版权声明
本文为[miao_zz]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_37117408/article/details/125616622