Carousel: In a module or window, you can see multiple pictures by clicking the mouse on the computer and swiping the finger on the phone. These pictures are all round diagrams, and this module is called round module.

How to make a round diagram in JS, such as the following, can automatically generate the image corresponding to the dot, click the arrow can jump up or down the next picture, every few seconds to automatic round, but also can click on the dot to the specified picture.

HTML structure

First, we created an HTML page with a simple structure: we nested two divs inside one big div and called it slider-img. The top div was used to hold the images and the bottom div was used to hold the buttons and dots for the next image. This is called slider-Ctrl.

<! DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/index.css"/> <script src=".. /public.js"></script> <script src="./js/index.js"></script> </head> <body> <div class="slider" id="slider"> <div class="slider-img"> <ul> <li><a href="#"><img src="images/1.jpg" alt=""/></a></li> <li><a href="#"><img src="images/2.jpg" alt=""/></a></li> <li><a href="#"><img src="images/3.jpg" alt=""/></a></li> <li><a href="#"><img src="images/4.jpg" alt=""/></a></li> <li><a href="#"><img src="images/5.jpg" alt=""/></a></li> <li><a href="#"><img SRC = "images / 6. JPG" Alt = "" / > < / a > < / li > < / ul > < / div > < div class =" the slider - CTRL "> / / automatically generate dots here < span class =" prev" id="prev"></span> <span class="next" id="next"></span> </div> </div> </body> </html>Copy the code

CSS code

* { margin: 0; padding: 0; } .slider { width: 310px; height: 265px; margin: 100px auto; position: relative; overflow: hidden; } .slider-img { width: 310px; height: 220px; } ul { list-style: none; } li { position: absolute; top: 0; left: 0; } .slider-ctrl { text-align: center; padding-top: 10px; } .slider-ctrl-con { display: inline-block; width: 24px; height: 24px; background: url(.. /images/icon.png) no-repeat -24px -780px; text-indent: -99999px; margin: 0 5px; cursor: pointer; } .slider-ctrl-con.current { background-position: -24px -760px; } .prev,.next { position: absolute; top: 40%; width: 30px; height: 35px; background: url(.. /images/icon.png) no-repeat; } .prev { left: 10px; } .next { right: 10px; background-position: 0 -44px; }Copy the code

Js code

First, you need to do a wave of requirements analysis to clear your mind, and then write the code step by step. We first get the relevant elements, and then generate the corresponding dots according to the number of images. Since the images are stacked together, we hide the other images on the right and show the first one. Then you need to light up the first dot to make sure that the dot is bound to the image. Then we need to realize click the right arrow to see the next picture, click the left arrow to see the last picture, click the dot can show the corresponding picture, and all points for the image of the appearance. Finally, let him automatically round the picture, the mouse moved into the stop round, the mouse moved out of the round to continue to play

Window.onload = function(){var slider = document.getelementById ('slider'); Var imgLiS = slider.children[0]. Children [0]. Children; Var ctrlDiv = slide. children[1]; Var next = document.getelementById ('next') var next = document.getelementById ('next') Var width = slider.offsetwidth; Var index = 0; var index = 0; For (var I = imglis.length-1; i>=0; i--){ var newPoint = document.createElement('span'); NewPoint. ClassName = "slider-ctrl-con"; newPoint. ClassName = "slider-ctrl-con"; newPoint.innerHTML = i; / / in the front of ctrlDiv. InsertBefore (newPoint ctrlDiv. Children [0]) / / 2, all of the pictures in the right imgLiS [I] style.css. Left = width + "px"} / / 2 ImgLiS [index].style.left = 0; Var ctrlS = ctrldiv.children; // 4 Click on the left arrow to see the previous image, light the corresponding dot prev.onclick = prevImg; // 5 Click the right arrow to see the latter image, and light the corresponding small dot next. For (var I =0; var I =0; i<imgLiS.length; i++){ ctrlS[i].onclick = function(){ var num = +this.innerHTML; If (num>index){imgLiS[num].style.left = width+"px"; Move (imgLiS[num],'left',0)} if(num<index){// Move (imgLiS[num],'left',0) imgLiS[num].style.left = -width+"px"; // Move (imgLiS[num],'left',0)} // Update index index = num; // update index index = num; }} // 7 can automatically play the graph: Var timer = setInterval(nextImg,3000) var timer = setInterval(nextImg,3000) Onmouseleave = function(){clearInterval(timer) timer = setInterval(nextImg,3000)} Function light(){for(var I =0; i<imgLiS.length; CtrlS [I]. ClassName = "sliders - Ctrl-con"} ctrlS[index]. ClassName = "sliders - Ctrl-con current"  prevImg(){ var num = index-1; If (num<0){num = imglis.length -1; } imgLiS[num].style.left = -width+"px"; Move (imgLiS[num],'left',0) move(imgLiS[num],'left',0 Num index = num; Function nextImg(){var num = index + 1; if(num>imgLiS.length-1){ num = 0; } imgLiS[num].style.left = width+"px"; // Move (imgLiS[num],'left',0) // Update the index value index = num; light() } }Copy the code

Make a little progress every day and share every piece of knowledge