console
let ul = document.querySelector(".box>ul");
let leftArrow = document.querySelector(".leftArrow");
let rightArrow = document.querySelector(".rightArrow");
let liList = document.querySelectorAll(".point_box li");
let box = document.querySelector(".box");
let Timer;
let nowIndex = 0;
let isRun = true;
rightArrow.addEventListener("click", function() {
if(isRun){
isRun=false;
if(++nowIndex == ul.childElementCount){
nowIndex=0;
rightEndRun();
isRun = true;
}else{
run();
isRun = true;
}
}
})
leftArrow.addEventListener("click", function() {
if(isRun){
isRun=false;
if(--nowIndex == -1){
nowIndex= ul.childElementCount-1;
leftEndRun();
isRun = true;
}else{
run();
isRun = true;
}
}
})
liList.forEach(function(val,index){
val.addEventListener("mousemove",function(){
nowIndex=index;
run();
isRun = true;
})
})
function run(){
ul.style.transform = `translateX(-${nowIndex}00%)`;
liList.forEach(function(val,index){
index==nowIndex?val.classList.add("active"):val.classList.remove("active");
})
}
function rightEndRun(){
ul.appendChild(ul.firstElementChild.cloneNode(true));
ul.style.transform = `translateX(-${ul.childElementCount-1}00%)`;
function a(){
ul.style.transition="none";
run();
ul.removeChild(ul.lastElementChild);
getComputedStyle(ul).transition;
ul.style.transition="";
ul.removeEventListener("transitionend",a);
}
ul.addEventListener("transitionend",a);
}
function leftEndRun(){
ul.insertBefore(ul.lastElementChild.cloneNode(true),ul.firstElementChild);
ul.style.transition="none";
ul.style.transform = `translateX(-100%)`;
getComputedStyle(ul).transition;
ul.style.transition="";
ul.style.transform = `translateX(0%)`;
function b(){
ul.style.transition="none";
ul.removeChild(ul.firstElementChild);
run();
getComputedStyle(ul).transition;
ul.style.transition="";
ul.removeEventListener("transitionend",b);
}
ul.addEventListener("transitionend",b);
}
function autoplay(){
Timer = setInterval(function(){
if(isRun){
isRun=false;
if(++nowIndex == ul.childElementCount){
nowIndex=0;
rightEndRun();
isRun = true;
}else{
run();
isRun = true;
}
}
},2000)
}
autoplay();
box.addEventListener("mouseenter",function(){
clearInterval(Timer);
})
box.addEventListener("mouseleave",function(){
autoplay();
})
<html>
<body>
<div class="web">
<div class="box">
<ul>
<li>
<a href=""><img src="https://s1.ax1x.com/2020/10/09/0DLzG9.png" alt="1" border="0"></a>
</li>
<li>
<a href=""><img src="https://s1.ax1x.com/2020/10/09/0DLxPJ.png" alt="2" border="0"></a>
</li>
<li>
<a href=""><img src="https://s1.ax1x.com/2020/10/09/0DLXaF.png" alt="3" border="0"></a>
</li>
<li>
<a href=""><img src="https://s1.ax1x.com/2020/10/09/0DLj54.png" alt="4" border="0"></a>
</li>
</ul>
<div class="arrow leftArrow"><</div>
<div class="arrow rightArrow">></div>
<div class="point_box">
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none; }
html, body {
height: 100%; }
.web {
position: relative;
height: 100%; }
.web .box {
width: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden; }
.web .box > ul {
font-size: 0;
white-space: nowrap;
transition: all .3s; }
.web .box > ul li {
display: inline-block; }
.web .box > ul li a {
display: block; }
.web .box > ul li a img {
width: 100%; }
.web .box .arrow {
position: absolute;
width: 10%;
height: 100%;
font-size: 40px;
top: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
cursor: pointer;
user-select: none; }
.web .box .leftArrow {
left: 0;
background: linear-gradient(90deg, grey, transparent);
transform: translateX(-100%); }
.web .box .rightArrow {
right: 0;
background: linear-gradient(-90deg, grey, transparent);
transform: translateX(100%); }
.web .box:hover .arrow {
transform: translateX(0%); }
.web .box:hover .point_box {
bottom: 20px; }
.web .box .point_box {
padding: 5px;
border-radius: 15px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
transition: all 0.3s; }
.web .box .point_box ul {
font-size: 0;
white-space: nowrap; }
.web .box .point_box ul li {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
margin: 0 5px; }
.web .box .point_box ul li.active {
background-color: pink; }