* {
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;
}
-
1
-
2
-
3
-
4
-
5
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()
}
}