JS case: carousel diagram (second generation)

JS case: carousel diagram (second generation)

Compared with the previous version, the function is comprehensive, the function is modular, the connection is reduced, the bug is reduced, and the code is attached:

Html:

<!DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title > Document </title > < link rel = "stylesheet" href = "./css/main.css" > </head > < body > < div id = "box" > < div id = "pic_box" > </div > < img id = "left" src = "img/left.png" alt = "" > < img id = "right " src = "img/right.png" alt = "" > < ul id = "dot_box" > </ul > </div > < script src = "./js/main.js" > </script > </body > </html > Copy code

Css:

* { margin : 0 ; padding : 0 ; } #box { margin : 50px auto; width : 960px ; height : 320px ; background : lightcoral; position : relative; overflow : hidden; } #pic_box { height : 320px ; background : lightblue; position : absolute; } #left { position : absolute; top : 130px ; left : 10px ; } #right { position : absolute; top : 130px ; right : 10px ; } ul { list-style : none; position : absolute; bottom : 20px ; left : 400px ; } li { width : 20px ; height : 20px ; list-style : none; border-radius : 50% ; float : left; margin-left : 5px ; } Copy code

JS:

var box, pic_box, left, right, dot_box, liList; //Define the outermost big box, the box containing the picture, the left and right buttons, the small dot container under the box, and the current small dot container. var count = 0 ; //Record the index of the currently displayed picture var num = 160 ; //Timer frame number control var direct; //The left and right direction (the direction is left to right, and vice versa) the direction is the direction of the button var bool = false ; //Control whether to allow carousel var autoPlay = false ; //Whether to automatically rotate var picurl = [ "img/a.jpeg" , "img/b.jpeg" , "img/c.jpeg" , "img/d.jpeg " , "img/e.jpeg" ]; //Picture path varpiclist = []; //Loaded pictures (two) init(); //Entry function function init () { //Get all elements and assign them to variables, add event box = document .getElementById( "box" ); pic_box = document .getElementById( "pic_box" ); left = document .getElementById( "left" ); right = document .getElementById( "right" ); dot_box = document .getElementById( "dot_box" ); left.addEventListener( "click" , picChange); //click the left button right.addEventListener( "click" , picChange); //click the right button box.addEventListener( "mouseenter" , isAuto); //mouse enters the big box to cancel automatic Carousel box.addEventListener( "mouseleave" , isAuto); //Mouse leaves the big box and automatically rotates creatImg(); //Initialize and load all pictures animation(); //Enable every frame movement function creatDot(); //New dot (click to switch picture) } function creatImg () { for ( var j = 0 ; j <picurl.length; j++) { //Create a new picture based on the picture source piclist[j] = new Image(); piclist[j].src = picurl[j]; piclist[j].style.width = "960px" ; piclist[j].style.height = "320px" ; } pic_box.appendChild(piclist[ 0 ]); //Initialize the box with pictures, insert the first picture } function picChange ( e ) { if (bool) return ;//If the carousel switch is true, the function is not executed, that is, after clicking once, you need to wait for the entire picture to be rotated before clicking the next time if ( this === left) {//When you click the left button direct = "left" ;// Change the direction to the left count--;//The picture index minus one if (count ===- 1 ) {//When it is reduced to -1 , Let the index be the total number of pictures minus one (the array starts from zero) count = picurl.length- 1 ; } } else if ( this === right) { //When you click the right button direct = "right" ; //Change the direction to the right count++; //The picture index plus one if (count === picurl.length) { //When adding to the total number of pictures minus one, let the index be 0 (the array starts from zero) count = 0 ; } } nextPic(); //Create the next picture } function nextPic () { //Load the next picture pic_box.style.width = 960 * 2 + "px" ; //Initialize position if (direct === "right" ) { //When the direction is right, insert the next picture after the picture pic_box.appendChild(piclist[count]); pic_box.style.left = 0 ; } else if (direct === "left" ) { //When the direction is left, insert the next picture in front of the picture pic_box.insertBefore(piclist[count], pic_box.firstElementChild); pic_box.style.left = -960 + "px" ; } bool = true ; //After the picture is loaded, let the switch controlling the picture carousel be true to prevent the execution of other events during the picture carousel liChange(); //let the small point change } function animation () { //Animation function, automatic carousel and carousel requestAnimationFrame(animation); picMove(); autoScroll(); } function creatDot () { //Create a small point, control click to switch pictures for ( var i = 0 ; i <picurl.length; i++) { var li = document .createElement( "li" ); dot_box.appendChild(li); li.style.background = "rgba(255,255,255,0.7)" ; } dot_box.firstElementChild.style.background = "rgba(255,255,255,1)" ; //The first small dot is selected by default dot_box.addEventListener( "click" , changeDot); //Click the small dot to trigger the event and switch the picture liChange(); } function changeDot ( e ) { if (bool) return ;//If the carousel switch is true, the function is not executed, that is, after clicking once, you need to wait for the entire picture to be rotated before clicking the next var list = Array .from(dot_box .children);//Put the small point into the array var index = list.indexOf(e.target);//Find the current small point if (index === count) {//If the currently clicked picture is equal to the index , Which means not to switch (it is itself) return ; } if (index> count) { //When the clicked dot is on the current right, change the direction to right direct = "right" ; } else if (index <count) { //When the clicked dot is on the current left, change the direction to the left direct = "left" ; } count = index; //Switch the current index to the clicked nextPic(); //Create the next picture } function liChange () { if (liList) { //The previous small dot background is transparent liList.style.backgroundColor = "rgba(255,255,255,0.7)" ; } liList = dot_box.children[count]; //Assign the switched dot to the current dot to switch liList.style.background = "rgba(255,255,255,1)" ; } function picMove () { if (!bool) return ; //If the carousel switch is false, the function will not be executed, that is, the carousel can be started after clicking the button or small dot once if (direct === "left" ) { //to the right Move pic_box.style.left = pic_box.offsetLeft + 20 + "px" ; //Move speed, 20px each time, turn off the carousel switch when moving to 0, and delete the last picture if (pic_box.offsetLeft == = 0 ) { bool = false ; pic_box.lastElementChild.remove(); } } else if (direct === "right" ) { //Move to the left pic_box.style.left = pic_box.offsetLeft- 20 + "px" ; //Movement speed, -20px each time, when it moves to -960 Turn off the carousel switch, delete the first picture, and reset the position to 0 if (pic_box.offsetLeft ===- 960 ) { bool = false ; pic_box.firstElementChild.remove(); pic_box.style.left = 0 ; } } } function autoScroll () { //Automatic carousel if (!autoPlay) return ; //If the automatic carousel switch is not (when the mouse is moved in), no automatic carousel num--; //The timer frame number counter is reduced by one and reduced to 0 When assigned to 160 if (num === 0 ) { num = 160 ; direct = "right" ; count++; if (count === picurl.length) { count = 0 ; } nextPic(); } } function isAuto ( e ) {//When the mouse moves in, it will not rotate automatically, otherwise, it will rotate automatically if (e.type === "mouseenter" ) { autoPlay = false ; } else if (e.type = "mouseleave" ) { autoPlay = true ; } } Copy code