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 = 1;
let isRun = true;
ul.appendChild(ul.firstElementChild.cloneNode(true));
ul.insertBefore(ul.lastElementChild.previousElementSibling.cloneNode(true), ul.firstElementChild)
ul.style.transition = "none";
ul.style.transform = "translateX(-100%)";
getComputedStyle(ul).transition;
ul.style.transition = ""
rightArrow.addEventListener("click", function () {
isRun = false;
++nowIndex;
run();
})
leftArrow.addEventListener("click", function () {
isRun = false;
--nowIndex;
run();
})
liList.forEach(function(val,index){
val.addEventListener("mousemove",function(){
nowIndex=index+1;
run();
isRun = true;
})
})
function run() {
ul.style.transform = `translateX(-${nowIndex}00%)`;
if ((nowIndex == ul.childElementCount - 1) && (nowIndex = 1) ||
(nowIndex == 0) && (nowIndex = ul.childElementCount - 2)) {
ul.addEventListener("transitionend", function () {
ul.style.transition = "none";
ul.style.transform = `translateX(-${nowIndex}00%)`;
getComputedStyle(ul).transition;
ul.style.transition = ""
}, { once: true })
}
liList.forEach(function (val, index) {
index == (nowIndex - 1) ? val.classList.add("active") : val.classList.remove("active");
})
isRun = true;
}
function autoplay() {
isRun = false;
Timer = setInterval(function () {
++nowIndex;
run();
}, 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 .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; }