Native JS reusable picture rotation

How to achieve the effect of the carousel chart is very simple, but how to achieve a carousel chart similar to the plug-in effect here? First of all, we have a project analysis:

Effect realization:

  1. It can play automatically;
  2. There is an index showing the current picture;
  3. When the mouse slides in, a button appears (the previous one and the next one) and realizes the click switch and stops the automatic rotation at the same time;

Here, our writing method is to write nothing in the HTML file, and directly reference the CSS file and JS file in it. Because our HTML page structure is written directly by JS code, we only need to introduce JS file to do it in any order;

But let's first look at the layout of the page structure:
<div class="wrapper">
	<img src="imgs/1.jpg" width="500px" height="300px">
	<ul></ul>
	<a href="#" class="previous"><</a>
	<a href="#" class="next">></a>
</div>

This is the structure of our display page. It only needs a big box of div wrapped with pictures, buttons and index icons. Note: this code does not need to be written into HTML file, but only for explanation and demonstration

Then let's look at the CSS code:
.wrapper {   /*Style of outer box*/
	margin: auto;
	width: 500px;
	height: 300px;
	position: relative;
}

ul {   /*Box for picture index Icon*/
	width:100%;    
	padding: 0px 40px;
	box-sizing: border-box;
	display: flex;
	position: absolute;
	bottom: 0px;
}

li {   /* Style of each index Icon*/
	margin: auto;
	list-style: none;
	width: 30px;
	height: 30px;
	color: #fff;
	font-size: 20px;
	text-align: center;
	line-height: 30px;
	background-color: pink;
	border-radius: 50%;
	cursor: pointer;
}

a {    /*The style of the button*/
	font-size: 60px;
	color: blue;
	text-align: center;
	position: absolute;
	top: 50%;
	color: #fff;
	transform: translateY(-50%);  /*It can automatically keep the vertical center without setting the width and height of the element. It can be used in combination with positioning*/
	display: none;
	text-decoration: none;
	background-color: rgba(0, 0, 0, 0.2);
}

.previous {  /*(Previous) picture button*/
	left: 0px;
}

.next {		/*(Next) picture button*/
	right: 0px;
}

.previous:hover,  
.next:hover {    	/*Mouse slide in effect of button*/
	background-color: rgba(0, 0, 0, 0.4);
}
Finally, our JS code:
window.onload = function() {
	//Put the src path of the carousel picture in this array. You can write the path by yourself
	var imgs = ["imgs/1.jpg", "imgs/2.jpg", "imgs/3.jpg", "imgs/4.jpg"]; //The path inside is an example and needs to be modified by yourself
	var def_bgcolor = 'pink';  //The default index icon color can be changed to the color you like
	var sel_bgcolor = 'red';   //When indexing to the current picture, the corresponding icon color can also be modified by yourself
	//Add our carousel chart structure directly to the page body, and you can choose where to add it if necessary
	document.body.innerHTML = `<div class="wrapper">  
			<img src="${imgs[0]}" width="500px" height="300px">
			<ul></ul>
			<a href="#" class="previous"><</a>
			<a href="#" class="next">></a>
		</div>`;
	var wrapper = document.getElementsByClassName("wrapper")[0];  //Get box
	var img = document.getElementsByTagName('img')[0];  //Get picture elements
	var previous = document.getElementsByClassName("previous")[0]; //Get previous button
	var next = document.getElementsByClassName("next ")[0];  //Get next button
	var ul = document.getElementsByTagName("ul")[0];  //Boxes for getting and indexing
	var count = 0;   //Define a variable to control the subscript of image path array
	
	//Cycle through the length of the image array, dynamically generate the corresponding number of image index icons according to the number of images;
	for(var i = 0; i < imgs.length; i++) {
		var li = document.createElement("li");
		li.innerText = i + 1;
		ul.appendChild(li);
	}
	
	var lis = document.getElementsByTagName('li');   //Get all picture index icons
	lis[0].style.backgroundColor = sel_bgcolor;   //Set the color of the first icon
	var timer = setInterval(startloop, 1000);   //Set the timer for automatic picture rotation

	function startloop() {   //How to start the cycle of pictures
		count++;
		changeImg();
	}

	function changeImg() {   //The method of image cycle switching;
		if(count == 0) {     //When the image subscript is 0, it is reset to the length of the image array;
			count = imgs.length;
		}
		if(count == imgs.length) {   //When the image subscript is the length of the image array, reset to 0;
			count = 0;
		}
		img.src = imgs[count];    //The src of the only img element in the page is equal to the image path array defined by us;
		//Traverse index icon obtained
		for(var i = 0; i < lis.length; i++) {
			lis[i].style.backgroundColor = def_bgcolor;  //Reset all icon background colors to pink
		}
		lis[count].style.backgroundColor = sel_bgcolor ;  //Set the index icon color corresponding to the current picture
	}
	wrapper.onmouseenter = function() { 	//Operation when the mouse moves into the whole rotation chart
		previous.style.display = "block";   //Show hidden buttons
		next.style.display = "block";
		clearInterval(timer); 			//At the same time, turn off the timer of the current auto carousel
	}
	wrapper.onmouseleave = function() {   //Operation when the mouse moves out of the whole rotation chart
		previous.style.display = "none";    //Hide button
		next.style.display = "none";
		timer = setInterval(startloop, 1000);    //Restart timer
	}
	previous.onclick = function() {		//Click the "previous" button
		count--;		//The subscript is subtracted and the method of picture switching is called at the same time
		changeImg();
	}
	next.onclick = startloop;	//Click the "next" button to make it equal to the way that the picture starts to cycle
	//Loop through the index icon and move it in with the mouse
	for(var i = 0; i < lis.length; i++) {
		lis[i].index = i;		//Set the index index value of each index icon,
		lis[i].onmouseenter = function() {  //Action on index icon moved in by current mouse
			count = this.index;    //At this time, the subscript of the image path array is equal to the index value of the current index icon, and the image switching function is executed;
			changeImg()			
		}
	}
}
The final practical application effect is as follows:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Picture carousel</title>
		<script type="text/javascript" src="index.js"></script>
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
	</body>
</html>


Published 25 original articles, won praise 8, visited 357
Private letter follow

Tags: Javascript

Posted on Sat, 11 Jan 2020 09:02:27 -0500 by Poolie