<!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>
