js实现轮播图

<div> ???????<!---图片区域--> ???????<div class="sideShow"> ???????????<img src="images/1.jpg" style="width:100%;"/> ???????</div> ???????<div class="sideShow"> ???????????<img src="images/2.jpg" style="width:100%;"/> ???????</div> ???????<div class="sideShow"> ???????????<img src="images/3.jpg" style="width:100%;"/> ???????</div> ???????<!--上一张 & 下一张--> ???????<a class="last" onclick="polusSild(-1)"><</a> ???????<a class="next" onclick="polusSild(1)">></a> ???????<!---圆点区域---> ???????<div style="text-align:center;"> ???????????<span class="dot" onmouseover="currNode(1)"></span> ???????????<span class="dot" onmouseover="currNode(2)"></span> ???????????<span class="dot" onmouseover="currNode(3)"></span> ???????</div> ????</div>

body{ margin: 0px; padding: 0px }/*图片显示区域*/.sideShow{ ???width: 100%; ???animation:mymove 2s;}@keyframes mymove{ ???from{opacity:.4} ???to{opacity: 1}}/*上一张 & 下一张按钮*/.last,.next{ ???cursor: pointer; /*鼠标变成手状*/ ???color: #fff; ???width: auto; ???position: absolute; ???top: 30%; ???font-weight: bold; ???font-size: 40px; ???border-radius: 0 3px 3px 0; ?????padding: 16px; ???opacity: 0.2; ???????transition: background-color .6s ease; /*过渡*/}.last:hover,.next:hover{ ???background-color: #000;}.last{ ???left:0;}.next{ ???right: 0; ???border-radius: 3px 0 0 3px;}/*圆点*/.dot{ ?????cursor: pointer; ?????height: 13px; ?????width: 13px; ?????background-color: #bbb; ?????border-radius: 50%; ?????display: inline-block; ?????transition: background-color 0.6s ease;}.inter,.dot:hover{ ???background-color:#03C;}

var img = document.getElementsByClassName("sideShow"); //获取存放图片div的集合var dot = document.getElementsByClassName("dot"); //圆点集合var slideIndex = 1; ?showSild(slideIndex);
var tiems = setInterval(function(){showSild(++slideIndex)},5000)
var tiemsfunction polusSild(n){ ???showSild(slideIndex += n);}function currNode(n){ ???showSild(slideIndex = n);}function showSild(index){ ???????var i; ???if(index < 1){ slideIndex = img.length; ???} ???????if(index > img.length){ slideIndex = 1; ???} ???????for(i = 0;i < img.length; i++){ ???????img[i].style.display = "none"; ???} ???????for(i = 0;i < dot.length; i++){ ???????dot[i].className = dot[i].className.replace(" inter",""); ????} ???img[slideIndex - 1].style.display = "block"; ???dot[slideIndex - 1].className += " inter";}