Carousel diagrams are still relatively common in future applications and can be implemented without much line of code. But if you only master the basic knowledge of js, how can you use fewer and simple logical methods to achieve it? Here are some different practices:
1. Use displacement method to achieve
First, we can add a div to the body and set the width to a percentage (adaptive page). If the proportion is specific to whose percentage it is relative to, we will do it according to the needs. I won’t say much here. Put the image into the div.
Secondly, the style part sets all img tags to absolute to facilitate positioning
Finally, the js part talks about the logic, defining two empty arrays. The first array is used to save the initial picture displayed on the page and the picture waiting to enter, and the second array saves the remaining n pictures. Assume that these two arrays are set to: waitToShow=[]; and goOut=[]; waitToShow.shift(); If the first image is named showFirst, and the displacement and movement time are set for the showFirst image. After the execution is completed, put the showFirst into the tail of goOut: goOut.push(showFirst); At this time, the 0th element of the waitToShow array becomes the original second picture to be displayed. Set the displacement and movement time for this picture waitToShow[0], and pop up the first element picture of the goOut array and put it into the tail of the waitToShow array to ensure that the waitToShow array is always a displayed picture and the picture to be displayed. In this way, the two arrays form a loop to complete the implementation of the carousel picture. The reverse logic is the same (because the logic is too complicated, it is not recommended here)
2. The method of using the level of the hierarchy to change the top picture (this method does not have displacement actions, but the logic is very simple and practical)
It is more intuitive to directly code: basically every line has comments
<!DOCTYPE html><html><head><meta charset="utf-8"><title>carousel diagram (flash adaptive)</title><style media="screen">* {margin: 0;padding: 0;}.wrap {width: 60%;background: red;margin: auto;position: relative;}.wrap img {width: 100%;position: absolute;/*z-index: 10;*/}input {border: 1px solid lightgray;width: 50px;height: 30px;background: red;border-radius: 5px;font-size: 20px;}</style></head><body><div><img src="img/01.jpg" /><img src="img/02.jpg" /><img src="img/03.jpg" /><img src="img/04.jpg" /></div><input type="button" id="butLeft" name="name" value="◀︎"><input type="button" id="butRight" name="name" value="▶︎"></body><script type="text/javascript">// Get the images element to generate a string array. The string array cannot perform push pop splice or other operations// So it needs to restort its value into an array, with the definition afterwards var images = document.getElementsByTagName('img');var butLeft = document.getElementById('butLeft');var butRight = document.getElementById('butRight');// Get the variable index Used to set the level for the subsequent hierarchy using var index = 1000;// Get an empty array to store the string elements in images var images = [];// for loop is used to assign values to the imagess array and change the level of elements in the array for (var i = 0; i < images.length; i++) {imagess[i] = images[i];var currentImage = imagess[i];// The current level setting of the image, a round of for loop sets the initial zIndex for them. The higher the image is, the higher the level setting, so -i, so that the images will be from the first and second pictures in order... downwards in sequence currentImage.style.zIndex = -i;}// Set the counter count, perform a click event (left or right) count plus 1var count = 0;// The click event to the left butLeft.onclick = function() {// Pop up an image element from the head of the array var showFirst = imagess.shift();// Set a level for the popped image element, that is, -1000+count, // Make the level the smallest compared to other elements, the image popped up at the head of the array will be displayed at the bottom of the showFirst.style.zIndex = - index + count;// After the level change is completed, push it into the tail of the array imagess.push(showFirst);// Click once to add 1, do not consider the specific value, just click event plus 1 count++;}// Click the event to the right butRight.onclick = function() {// Pop up an element from the tail of images and assign it to showFirstvar showFirst = imagess.pop();// Set the level of showFirst to the maximum, 1000+count, so it will be displayed on the first layer showFirst.style.zIndex = index + count;// After the level changes, insert it into the head of the array imagess images.unshift(showFirst);// Click once to add 1count++;}</script></html>The above must-read article on the basic js (simple implementation of click event carousel) is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.