<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#slide {
width: 620px;
height: 250px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#slide ul {
width: 500%;
height: 250px;
}
#slide li {
width: 620px;
height: 250px;
float: left;
}
#slide li>div {
width: 620px;
height: 250px;
}
#slide li>div.red {
background: red;
}
#slide li>div.green {
background: green;
}
#slide li>div.blue {
background: blue;
}
#slide li>div.yellow {
background: yellow;
}
#slide li>div.gray {
background: gray;
}
#arrowLeft,
#arrowRight {
width: 30px;
height: 50px;
position: absolute;
top: calc(50% - 25px);
background: #000;
}
#arrowLeft {
left: 0;
}
#arrowRight {
right: 0;
}
</style>
</head>
<body>
<div id='slide'>
<ul>
<li>
<div class="red">1</div>
</li>
<li>
<div class="green">2</div>
</li>
<li>
<div class="blue">3</div>
</li>
<li>
<div class="yellow">4</div>
</li>
<li>
<div class="gray">5</div>
</li>
</ul>
<div class="numAll">
<ul class="num">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="arrowLeft"></div>
<div id="arrowRight"></div>
</div>
<script>
var slide = document.querySelector('#slide')
var slideUl = document.querySelector('#slide ul')
var li = document.querySelectorAll('#slide ul li')
var arrowLeft = document.querySelector('#arrowLeft')
var arrowRight = document.querySelector('#arrowRight')
function init() {
var firstCopy = li[0].cloneNode(true)
var lastCopy = li[4].cloneNode(true)
slideUl.style.width = '700%'
slideUl.style.position = 'absolute'
slideUl.style.left = '-620px'
slideUl.appendChild(firstCopy)
slideUl.insertBefore(lastCopy, li[0])
}
init()
arrowRight.onclick = function () {
slideUl.style.left = parseInt(slideUl.style.left) - 620 + 'px'
slideUl.style.transition = '0.3s'
if (parseInt(slideUl.style.left) < -3720) {
slideUl.style.left = '-620px'
slideUl.style.transition = 'none'
setTimeout(function () {
slideUl.style.left = '-1240px'
slideUl.style.transition = '0.3s'
}, 0);
}
}
arrowLeft.onclick = function () {
slideUl.style.left = parseInt(slideUl.style.left) + 620 + 'px'
slideUl.style.transition = '0.3s'
if (parseInt(slideUl.style.left) > 0) {
slideUl.style.left = '-3100px'
slideUl.style.transition = 'none'
setTimeout(function () {
slideUl.style.left = '-2480px'
slideUl.style.transition = '0.3s'
}, 0);
}
}
var t=null
function star() {
t = setInterval(function () {
arrowRight.click()
}, 1500);
}
star()
slide.onmousemove = function () {
clearInterval(t);
slide.onmouseout=function(){
star()
}
}
</script>
</body>
</html>
