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