<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 200px;
height: 250px;
text-align: center;
border: 1px solid;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#sox {
width: 1200px;
height: 200px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
line-height: 200px;
font-size: 20px;
font-weight: bold;
position: relative;
left: -200px;
}
#sox div {
width: 200px;
height: 200px;
position: relative;
}
#btn {
width: 200px;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
li {
width: 15px;
height: 15px;
background: cornflowerblue;
border-radius: 50%;
float: left;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="sox">
<div style="background: paleturquoise;">4</div>
<div style="background: pink;">1</div>
<div style="background: lightgoldenrodyellow;">2</div>
<div style="background: plum;">3</div>
<div style="background: paleturquoise;">4</div>
<div style="background: pink;">1</div>
</div>
<div id="btn">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div>
<button id="lft"> < </button>
<button id="rgt"> > </button>
</div>
</div>
</div>
<script type="text/javascript">
var Lft = document.getElementById("lft");
var Rgt = document.getElementById("rgt");
var sox = document.getElementById("sox");
var Arrdiv = sox.getElementsByTagName("div");
var ArrLi = document.getElementsByTagName("li");
var box = document.getElementById("box");
var num = 0;
var kai = true;
for (let i = 0; i < ArrLi.length; i++) {
ArrLi[i].onclick = function() {
sox.style.transition = "none";
sox.style.left = -Arrdiv[0].offsetWidth * (i + 1) + "px";
num = i;
}
}
Rgt.onclick = rgt;
var move = setInterval(rgt, 3000);
box.onmouseover = function() {
clearInterval(move);
}
box.onmouseout = function() {
move = setInterval(rgt, 3000);
}
function rgt() {
if (kai) {
kai = false;
num++;
sox.style.transition = 0.5 + "s";
sox.style.left = -Arrdiv[0].offsetWidth * (num + 1) + "px";
setTimeout(function() {
kai = true
if (sox.offsetLeft == "-1000") {
num = 0;
sox.style.transition = "none";
sox.style.left = -Arrdiv[0].offsetWidth + "px";
}
}, 500)
}
}
Lft.onclick = function() {
if (kai) {
kai = false;
num--;
sox.style.transition = 0.5 + "s";
sox.style.left = -Arrdiv[0].offsetWidth * (num + 1) + "px";
setTimeout(function() {
kai = true
if (sox.offsetLeft == "0") {
num = 3;
sox.style.transition = "none";
sox.style.left = -Arrdiv[0].offsetWidth * (num + 1) + "px";
}
}, 500)
}
}
</script>
</body>
</html>