I have shared a carousel graph algorithm that changes the hierarchy before. Today, I continue to use transparency to achieve a displacement-free carousel graph algorithm.
Implementation logic: Position all the pictures to be carouseled together, that is, stack them up layer by layer, and use the hierarchical attributes to adjust the correct picture order, set the transparency of the picture to 0, and then make the transparency of the initial first picture to 1. The specific algorithm is as follows:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Change transparency algorithm (classic)</title> <style media="screen"> * { margin: 0; padding: 0; } .wrap { width: 60%; margin: auto; position: relative; } .wrap img { width: 100%; position: absolute; left: 0; top: 0; transition: 2s; } .wrap img:nth-child(1) { position: relative; } .wrap .follow { width: 150px; height: 30px; margin: auto; display: flex; justify-content: space-between; } .wrap .follow span { width: 10px; height: 10px; border-radius: 50%; border: 3px solid gray; } .wrap .follow span:hover { cursor: pointer; } </style> </head> <body> <div> <img src="img/01.jpg" /> <img src="img/02.jpg" /> <img src="img/03.jpg" /> <img src="img/04.jpg" /> <input id="leftBut" type="button" name="name" value="◀︎"> <input id="rightBut" type="button" name="name" value="▶︎"> <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> <script type="text/javascript"> // Get the required element var images = document.querySelectorAll('.wrap img'); var spans = document.querySelectorAll('.follow span'); var leftBut = document.getElementById('leftBut'); var rightBut = document.getElementById('rightBut'); // Define the parameter function showImage(index) { for (var i = 0; i < images.length; i++) { spans[i].index = i;//Custom attributes, get the corresponding subscript images[i].index = i;//Custom attributes, get the corresponding subscript images[i].style.zIndex = 100 - i;//Assign the image order images[i].style.opacity = '0';//Assign all image transparency to 0 spans[i].style.background = 'gray';//All dots Beijing colors are set to black} //Assign the image transparency of the incoming parameter subscript value to 1 images[index].style.opacity = '1'; //Assign the background color of the picture with incoming parameter subscript value to white spans[index].style.background = 'white'; } showImage(0);//Initially set the style of the picture with incoming parameter subscript value to 0 var count = 1;//Get counter// Define the automatic carousel function imageMove() { // If the value of count can be divisible by 4, then reassign count to 0; if (count % 4 == 0) { count = 0; } // Pass the count value as a parameter to the function showImage(); showImage(count); count++;//Execute once +1 } // Set the function imageMove() to call once every two seconds and assign it to imageInitialMove var imageInitialMove = setInterval('imageMove()', 2000); // Click the event leftBut.onclick = function() { // Clear the timer clearInterval(imageInitialMove); // Since the direction is opposite to the automatic wheel, it is necessary to judge that the value of count is 0, reassign it to 4, and continue to loop if (count == 0) { count = 4; } count--;showImage(count);//Calling the function count first from -imageInitialMove = setInterval('imageMove()', 2000); } // The right-to-rightBut.onclick = function() { clearInterval(imageInitialMove); imageMove();//Because the direction is the same as the automatic carousel, call directly // Reassign the timer imageInitialMove = setInterval('imageMove()', 2000); } // Click event for dots for (var i = 0; i < spans.length; i++) { spans[i].onclick = function() { clearInterval(imageInitialMove); // Assign the subscript value of the currently clicked dot to count count = event.target.index; // Call the function showImage(count); imageInitialMove = setInterval('imageMove()', 2000); } } </script></html>Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.