Effect

Implementation Principle

Purely using html+css+JS
Discovery is relatively simple and does not require additional plug-ins or libraries
The core is to group the pictures into a sequence of rows, moving left and right, and overflow:hidden of the parent element to determine which pictures to display.
Simply draw:

Build basic interface

<div id="box">
            <img src="images/arrowleft.png" id="arrow-left">
            <img src="images/arrowright.png" id="arrow-right">
            <ul id="multi-circles">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="multi-images">
                <img src="images/1.jpg">
                <img src="images/2.jpg">
                <img src="images/3.jpg">
                <img src="images/4.jpg">
                <img src="images/5.jpg">
                <div class="clear"></div>
            </div>
        </div>

There are three main parts, two arrows to the left and right, a sequence of dots, and a sequence of pictures.
Use absolute positioning to lay them out, and z-index to determine their cascading relationships
Define the width and height of the picture as a css variable in advance to make it easy for each element to calculate and determine the height and width

    #box {
    position:relative;
    width:var(--imageWidth);
    height:var(--height);
    overflow: hidden;
    }
    #multi-circles {
    position:absolute;
    right:30px;
    bottom:10px;
    z-index: 2;
    }
    #multi-images {
    position:absolute;
    left:0;
    top:0;
    z-index: 1;
    width:calc(var(--imageWidth)*5);
    height:var(--height);
    }
    #arrow-right,
    #arrow-left {
    position: absolute;
    top:50%;
    margin-top:-20px;
    height:40px;
    z-index: 3;
    }
    #arrow-right {
    right:0;
    }
    #arrow-left {
    left:0;
    }

Determine Picture Number

In order to rotate, we need to know which picture we should show now
Define the variable currentIndex in js to represent the sequence number of the currently displayed picture, initially 0
When you click an arrow or move the mouse over a dot, simply change the number

//dom operation first, get html components
var arrowLeft = document.getElementById("arrow-left");
var arrowRight = document.getElementById("arrow-right");
var multiImages = document.getElementById("multi-images");
var circles = document.getElementById("multi-circles").getElementsByTagName("li");
var box=document.getElementById("box");

//Bind events for arrows and dots
arrowLeft.addEventListener("click", preMove);
arrowRight.addEventListener("click", nextMove);
for (let i = 0; i < circles.length; i++) {
        circles[i].setAttribute("id", i);
        circles[i].addEventListener("mouseenter", overCircle);
}

//Slide through a dot
function overCircle() {
    currentIndex = parseInt(this.id);
}
//left arrow
function preMove() {
    if (currentIndex != 0) {
        currentIndex--;
    }
    else {
        currentIndex = 4;
    }
}
//right arrow
function nextMove() {
    if (currentIndex != 4) {
        currentIndex++;
    }
    else {
        currentIndex = 0;
    }
}

Slide

Now that we know which picture we should show now, how do we show it?
As we have already said above, the principle of sliding is to change the position of the image sequence and move left and right.
Add the overflow:hidden of the parent element to display only the corresponding picture
So just write a function like this and add it to the previous events

function moveImage() {
    multiImages.style.left = -currentIndex * 400 + "px";
}

This is a hard jump for sliding
There are ways to write animate functions or jquery functions on the web
Here I think of the transition attribute directly using css3
Just add one sentence below the css class of the image sequence

#multi-images {
     transition: 1s;
}

You can slide naturally

Dot color

We want the corresponding dots to turn red when the picture is displayed
It's easy to change the color of the current dot, as long as the current Index variable helps
But turn the previous dot back white
True, you can turn all the dots white with a for loop first
But then there is redundant work, and we know that just change the color of a dot
So you define a new variable, preIndex, to record the previous image displayed
As long as in the previously bound event function, the first sentence is a shilling preIndex=currentIndex
Save to the previous number just before the picture number changes
Then add such a function at the end of the event

function changeCircleColor(preIndex, currentIndex) {
    circles[preIndex].style.backgroundColor = "rgb(240, 240, 240)";
    circles[currentIndex].style.backgroundColor = "rgb(245, 40, 40)";
}

Suspended Arrow

We want the left and right arrows to appear when the mouse is placed on the relay map
So first let the display of the arrow be none

#arrow-right,
#arrow-left {
display:none;
}

Add mouseover event to box

box.addEventListener("mouseover",function() {
    arrowLeft.style.display="block";
    arrowRight.style.display="block";
});

When the mouse is over the arrow, it becomes a click style

#arrow-right,
#arrow-left {
cursor:pointer;
}

Auto-rotation

Basic work has been done so far
But we also want it to rotate automatically
Wheeling pauses when the mouse is placed on the wheeling map
So we set up a timer
When the mouse is over the box, clear the timer, and leave, re-establish

timer=setInterval(nextMove,2000);
box.addEventListener("mouseover",function() {
    clearInterval(timer);
});
box.addEventListener("mouseout",function() {
    timer=setInterval(nextMove,2000);
});

Interlude

I encountered a very strange bug while making it
Event discoloration is also triggered when the mouse moves to the left of a dot
Later, I changed the light background and found that it was due to the default style of <li>
There is also a small dot to the left of the dot

Remove this style

ul,
li {
    list-style: none;
}

Complete Code

Code address: https://github.com/ssevenk/Ca...