Rotary Planting Map

I believe that the concept of the rotation map need not be elaborated, so we directly start thinking analysis. If you want the source code directly, please Click here

Analysis of Thought

The idea of realizing the rotation map is very simple. I use several pictures to arrange horizontally in turn. By unifying the visual area and the size of the picture, I can only play one picture at a time, and then set a timer to regularly rotate the picture (essentially changing the position of the whole picture behind, which is somewhat similar to a few horizontal stickies). The feeling of photographs together, there is a picture frame in front, you can pull the picture behind to decide which picture to show in the picture frame. The idea is simple, then, code it.

Code parsing

Firstly, the structure of html is given.

	<div class="myView">
			<div id="slide">
				<img src="1.jpg"  class="slide"><img src="2.jpg"  class="slide"><img src="3.jpg"  class="slide">
			</div>
			<div class="prev" onclick="prevPic()"><</div>
			<div class="next" onclick="nextPic()">></div>
			<div class="pointer">
				<span class="button" index="0" style="background:green;"></span>
				<span class="button" index="1"></span>
				<span class="button" index="2"></span>
			</div>
		</div>

Note here: because browser compatibility issues img will have a horizontal margin when distributed in multiple rows, the solution is to delete line breaks and spaces between img icons. If you don't believe it, you can try (funny)

CSS code is relatively simple, that is to design some simple style, the key point is to use CSS3 transition to achieve an animation effect, the difficulty is not high, given in the final source code.

JS code is actually not difficult. Simple parsing starts.

	let index = 0;
	let imgNum = 3;
	let imgWidth = 500; 
	let slide = document.getElementById("slide");
	let btns = document.getElementsByClassName("button");
	let autoToggle = setInterval(togglePic,3000);

Define a timer to automatically switch the next picture every 3 seconds. It is important to note that when the user clicks the button, the current timer needs to be cleared and the timing restarted.

The function of encapsulating switching pictures and the index of the input pictures are switched to the corresponding pictures. (It is strongly recommended that you form a good habit of encapsulating functions, because this will solve many problems in future development.)

function translatePic(index){
	slide.style.transform = `translateX(-${index*imgWidth}px)`;
	for(let i = 0; l= btns.length, i<l; i++){
		if(i == index){
			btns[i].style.background = "green";
		}
		else{
			btns[i].style.background = "gray";
		}
	}
}

Switch the picture to a higher level of encapsulation, which requires index processing. When the last one is rotated, the next one is rotated.

function togglePic(){
	if(index == imgNum-1){
		index = 0;
	}
	else{
		index++;
	}
	translatePic(index);
}

Functions performed when the user clicks on the previous or next picture

function prevPic(){
	clearInterval(autoToggle);
	if(index < 1){
		index = imgNum-1;
	}else{
		index--;
	}
	translatePic(index);
	autoToggle = setInterval(togglePic,3000);
}
function nextPic(){
	clearInterval(autoToggle);
	if(index == imgNum-1){
		index = 0;
	}else{
		index++;
	}
	translatePic(index);
	autoToggle = setInterval(togglePic,3000);
}

Finally, we add click events for the following small dots. When clicking, we switch to the corresponding picture (using the translatePic function encapsulated earlier). The method of adding events to small dots here is event delegation (recommendation), and the common method is also given in the source code comments.

//Event Delegation
let pointer = document.getElementsByClassName("pointer");
pointer[0].addEventListener('click',function(e){
	let targetIndex = e.target.getAttribute('index');
	if(targetIndex){
		clearInterval(autoToggle);
		translatePic(targetIndex);
		autoToggle = setInterval(togglePic,3000);
		index = targetIndex;
	}
})

Speaking of this should be almost the same, the specific CSS attributes are scribbled, so it is not very good, but the basic methods are implemented, you can change according to your own needs, if there is anything unclear, also welcome to leave a message, I will often see.

The source code is given below (just put the picture in the same directory and name it 1.jpg, 2.jpg, 3.jpg.)
source code

<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.myView{
				width: 500px;
				height: 500px;
				margin: 0 auto;
				border: 1px solid black;
				position: relative;
				top: 100px;
				overflow: hidden;
			}
			#slide{
				width: 1500px;
				height: 500px;
				transition: transform 1s;
			}
			#slide img{
				width: 500px;
				height: 500px;
			}
			.prev,.next{
				width: 30px;
				height: 50px;
				background: green;
				position: absolute;
				top: 50%;
				margin-top: -25px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.prev{
				left: 10px;
			}
			.next{
				right: 10px;
			}
			.pointer{
				position: absolute;
				width: 100px;
				bottom: 20px;
				left: 50%;
				margin-left: -50px;
			}
			.button{
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				margin: 0 5px;
				background: gray;
				cursor: pointer;
			}
		</style>
	</head>
	
	<body>
		<div class="myView">
			<div id="slide">
				<img src="1.jpg"  class="slide"><img src="2.jpg"  class="slide"><img src="3.jpg"  class="slide">
			</div>
			<div class="prev" onclick="prevPic()"><</div>
			<div class="next" onclick="nextPic()">></div>
			<div class="pointer">
				<span class="button" index="0" style="background:green;"></span>
				<span class="button" index="1"></span>
				<span class="button" index="2"></span>
			</div>
		</div>
		<script>
			let index = 0;
			let imgNum = 3;
			let imgWidth = 500; 
			let slide = document.getElementById("slide");
			let btns = document.getElementsByClassName("button");
			let autoToggle = setInterval(togglePic,3000);

			//longhand
			// for(let i = 0; l= btns.length, i<l; i++){
			// 	btns[i].addEventListener('click',function(){
			// 		clearInterval(autoToggle);
			// 		translatePic(i);
			// 		autoToggle = setInterval(togglePic,3000);
			// 		index = i;
			// 	})
			// }
			
			//Event Delegation
			let pointer = document.getElementsByClassName("pointer");
			pointer[0].addEventListener('click',function(e){
				let targetIndex = e.target.getAttribute('index');
				if(targetIndex){
					clearInterval(autoToggle);
					translatePic(targetIndex);
					autoToggle = setInterval(togglePic,3000);
					index = targetIndex;
				}
			})
			
			function translatePic(index){
				slide.style.transform = `translateX(-${index*imgWidth}px)`;
				for(let i = 0; l= btns.length, i<l; i++){
					if(i == index){
						btns[i].style.background = "green";
					}
					else{
						btns[i].style.background = "gray";
					}
				}
			}
			function togglePic(){
				if(index == imgNum-1){
					index = 0;
				}
				else{
					index++;
				}
				translatePic(index);
			}
			function prevPic(){
				clearInterval(autoToggle);
				if(index < 1){
					index = imgNum-1;
				}else{
					index--;
				}
				translatePic(index);
				autoToggle = setInterval(togglePic,3000);
			}
			function nextPic(){
				clearInterval(autoToggle);
				if(index == imgNum-1){
					index = 0;
				}else{
					index++;
				}
				translatePic(index);
				autoToggle = setInterval(togglePic,3000);
			}
		</script>
	</body>
</html>