Primary version of the rotation map, to achieve the left and right buttons to switch pictures, below the small point to switch pictures, simple automatic rotation

Code :(disadvantages, fixed number of pictures and width and height, need to copy each time used, cumbersome code, many functions are not perfect)

Html:

<! DOCTYPEhtml>
<html>

    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</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 the code

Css:

* {
    margin: 0;
    padding: 0;
}

#box {
    margin: 50px auto;
    width: 960px;
    height: 320px;
    background: lightcoral;
    position: relative;
    overflow: hidden;
}

#pic_box {
    height: 320px;
    width: 4800px;
    background: lightblue;
    position: absolute;
    transition: all 1s;
}

#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%;
    border: 3px solid lightcoral;
    float: left;
    margin-left: 5px;
}
Copy the code

JS:

var pic_box, box, left, right, dot_box, dot, count = 0; // Define the picture box, the outermost big box, the left and right buttons, the box below the small dot container, and the current small dot container, count, record the number of pictures currently displayed
var arr_img = ["a.jpeg"."b.jpeg"."c.jpeg"."d.jpeg"."e.jpeg"];
// Image path
init();

function init() { // The entry function gets all elements and assigns them to variables
    dot_box = document.getElementById("dot_box");
    pic_box = document.getElementById("pic_box");
    box = document.getElementById("box");
    left = document.getElementById("left");
    right = document.getElementById("right");
    pic_box.style.left = 0; // The left side of the picture box is initialized relative to the parent element (the largest box)
    for (var i = 0; i < arr_img.length; i++) { // Create a new image and width and height
        var img = new Image();
        img.src = "img/" + arr_img[i];
        img.style.width = "960px";
        img.style.height = "320px";
        pic_box.appendChild(img);
        var li = document.createElement("li"); // Create a new dot under the box (click toggle)
        dot_box.appendChild(li);
    }
    dot = dot_box.firstElementChild; // Defaults to the first smaller style
    dot.style.backgroundColor = "lightcoral";
    // Add listening events to the little dots and left and right buttons below the box
    left.addEventListener("click", change_pic);
    right.addEventListener("click", change_pic);
    dot_box.addEventListener("click", changedot);
}

function change_pic(e) {
    / / the left button
    if (this === left) {
        count--; // Count decrement until less than zero to the last card
        if (count < 0) {
            count = arr_img.length - 1;
        }
        / / right button
    } else if (this === right) {
        count++; // The counter increments until it is greater than the total number of pictures minus 1 to jump to the first one
        if (count > arr_img.length - 1) {
            count = 0;
        }
    }
    pic_box.style.left = -count * 960 + "px"; // Click to switch the positioning position to move horizontally
    count_pic(); // Change the position of the dot after each move
}

function changedot(e) { // Click the dot to make the counter equal to the index of the dot, move the picture, and switch the dot
    for (var j = 0; j < arr_img.length; j++) {
        if (dot_box.children[j] === e.target) {
            count = j;
        }
    }
    pic_box.style.left = -count * 960 + "px";
    count_pic();
}

function count_pic() {
    dot.style.backgroundColor = "transparent"; // The previous dot has a transparent background
    dot = dot_box.children[count]; // Assign the toggled dot to the current dot to toggle according to the counter
    dot.style.backgroundColor = "lightcoral";
}

function autochange() { // Automatic rotation, 3 seconds to switch
    count++;
    if (count > arr_img.length - 1) {
        count = 0;
    }
    pic_box.style.left = -count * 960 + "px";
    count_pic();
}
setInterval(autochange, 3000);
Copy the code