当前位置：网站首页>Learning and Exploration - Seamless rotation map

Learning and Exploration - Seamless rotation map

2022-07-06 19:30:00 【miao_ zz】
Seamless carousel

- design sketch
- Code block
design sketch

Insert picture description here
Code block

<!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, // Get the width of the visual area of the rotation chart 
			carouselList: document.querySelector(".carousel-list"),
			arrowLeft: document.querySelector(".carousel-arrow-left"),
			arrowRight: document.querySelector(".carousel-arrow-right"),
			indicators: document.querySelectorAll(".indicator span"),
			currentIndex: 0, // Subscript from 0 Start 
		}
		init();

		function init() {
			// Copy the first picture 
			const first = doms.carouselList.firstElementChild.cloneNode(true);
			// Copy the last picture 
			const last = doms.carouselList.lastElementChild.cloneNode(true);

			// Put the first picture at the end 
			doms.carouselList.appendChild(first);
			// Put the last picture on the first ,
			/**
			 * insertBefore()  Method inserts a new child node before an existing child node .
			 *  grammar :
			 *	insertBefore(newnode,node);
			 *	 Parameters :
			 *	newnode:  The new node to insert .
			 *	node:  Insert node before specifying this node .
			 * **/
			doms.carouselList.insertBefore(last, doms.carouselList.firstElementChild);
			// Set the width of the package carousel content block ,
			//document.querySelector(".carousel-list").childElementCount, It should be placed behind the inserted node , To get the latest number of nodes 
			const childElementCount = document.querySelector(".carousel-list").childElementCount;
			// Set the width for the outline of the carousel , It is used to wrap all the rotating blocks 
			doms.carouselList.style.width = doms.carouselBoxWidth * childElementCount + 'px';

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

			// Remove the selection effect of the indicator 
			let active = document.querySelector(".indicator span.indicator-current");
			active.classList.remove("indicator-current");
			// Add the selected indicator 
			doms.indicators[index].classList.add("indicator-current");

			doms.currentIndex = index;
		}
		// The carousel image resets the rendering effect 
		function resetMoveTo(index) {
			doms.carouselList.style.transform = `translateX(-${(index+1)*doms.carouselBoxWidth}px)`;
			doms.carouselList.style.transition = 'none';
			// Remove the selection effect of the indicator 
			let active = document.querySelector(".indicator span.indicator-current");
			active.classList.remove("indicator-current");
			// Add the selected indicator 
			doms.indicators[index].classList.add("indicator-current");

			doms.currentIndex = index;
		}
		// Click the indicator 
		doms.indicators.forEach((item, index) => {
			item.addEventListener("click", () => {
				moveTo(index)
			})
		})
		// Click the left arrow 
		doms.arrowLeft.addEventListener("click", () => {
			const total = doms.indicators.length;
			if (doms.currentIndex === 0) {
				// Seamless rotation 
				//resetMoveTo(total - 1); Is equivalent to the following 
				doms.carouselList.style.transform = `translateX(-${(total)*doms.carouselBoxWidth}px)`;
				doms.carouselList.style.transition = 'none';
				doms.carouselList.clientHeight; // Force rendering 
				moveTo(total - 1)
			} else {
				moveTo(doms.currentIndex - 1)
			}
		})
		// Click the right arrow 
		doms.arrowRight.addEventListener("click", () => {
			const total = doms.indicators.length;
			if (doms.currentIndex === total - 1) {
				// Seamless rotation 
				//resetMoveTo(0); Is equivalent to the following 
				doms.carouselList.style.transform = `translateX(-${(0+1)*doms.carouselBoxWidth}px)`;
				doms.carouselList.style.transition = 'none';
				doms.carouselList.clientHeight; // Force rendering 
				moveTo(0)
			} else {
				moveTo(doms.currentIndex + 1)
			}
		})
	</script>
</html>
JavaScript Basic learning website
原网站
版权声明
本文为[miao_ zz]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/187/202207061129259400.html