rendering

Tips: Small dot, mouse move in rotation to pause, move out of rotation to continue, move in to show left and right arrows, move out to hide left and right arrows and so on effect is not implemented, I think these significance is not significant, focus on understanding the implementation principles behind the rotation diagram.

The principle of the wheel cast graph

Add one image each to the list of existing images, the last image at the head and the first image at the tail:

<ul class="loop">
    <li><img src="./banner1.jpg" /></li>
    <li><img src="./banner2.jpg" /></li>
    <li><img src="./banner3.jpg" /></li>
 </ul>
Copy the code

Add it with js, of course.

<ul class="loop">
    <li><img src="./banner3.jpg" /></li>
    <li><img src="./banner1.jpg" /></li>
    <li><img src="./banner2.jpg" /></li>
    <li><img src="./banner3.jpg" /></li>
    <li><img src="./banner1.jpg" /></li>
 </ul>
Copy the code

Banner1 is displayed by default. Judge the boundary value when clicking the last one. After moving left to Banner3, quietly turn off the transition effect and move right to the second Banner3 image (the user has no perception).

Pay attention to the point

1. The purpose of adding a picture at the beginning and the end is to have a transition effect when clicking for the first time and to facilitate the black box operation of moving behind 2. The black box operation of moving must be carried out after the transition is completed, so the delay setTimeout is used, and the delay === transition time 3. To prevent users from clicking too fast, throttling must be carried out

Small development

Why do people implement wheel – cast graphs when fetchingdomThe elements are written asdocument.querySelectorRather thandocument.getElementBySeries?

QuerySelector returns a Static Node List, whereas the getElementsBy series returns a Live Node List. The former is a snapshot. Adding new elements later does not affect the query results. The latter can be thought of as an object address whose address is fixed but whose content is not fixed, and which changes dynamically with subsequent node operations.

The complete code

<! DOCTYPE html><html>
<head>
	<title>Hand-written rotation chart</title>
	<style type="text/css">
		body {
			text-align: center;
		}
		.wrap {
			width: 400px;
			border: 1px solid #eeeeee;
			margin: 100px auto;
			overflow: hidden;
		}
		.loop {
			display: flex;
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.loop li img {
			width: 400px;
			height: 300px;
			vertical-align: bottom;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<ul class="loop">
			<li><img src="./banner1.jpg" /></li>
			<li><img src="./banner2.jpg" /></li>
			<li><img src="./banner3.jpg" /></li>
		</ul>
	</div>
	<button onclick="prev()">On one piece</button>
	<button onclick="next()">The next</button>
	<script type="text/javascript">
		{
			// Add one image before and one after, for seamless sliding
			const loop = document.querySelector('.loop')
			const li = document.querySelectorAll('.loop li')
			loop.insertBefore(li[li.length -1].cloneNode(true), li[0])
			loop.appendChild(li[0].cloneNode(true))
			loop.style.transform = 'translateX(-400px)'
			// Define some variables
			let now = 1 // Which one is it
			let timer = null / / timer

			function prev() {
				if(! timer) {// perform throttling
					loop.style.transition = '.3s';
					loop.style.transform = `translateX(-${--now * 400}px)`
					timer = setTimeout(() = > {
						if(! now) { now = li.length loop.style.transition ='none';
							loop.style.transform = `translateX(-${now * 400}px)`
						}
						timer = null
					}, 300)}}function next() {
				if(! timer) {// Throttling processing
					loop.style.transition = '.3s';
					loop.style.transform = `translateX(-${++now * 400}px)`
					timer = setTimeout(() = > {
						if (now > li.length) {
							now = 1
							loop.style.transition = 'none';
							loop.style.transform = `translateX(-${now * 400}px)`
						}
						timer = null
					}, 300)}}// automatic rotation
			setInterval(next, 2000)}</script>
</body>
</html>
Copy the code