원생 자 바스 크 립 트 단순 라운드 효과 demo

demo
<br>
<span></span>span{padding:5px 10px; background:blue;margin-bottom:5px;}
<br>
<span></span>.box{width:300px;height:100px;overflow:hidden;}
<br>
<span></span>.box div{width:300px;height:100px; display:none;}
<br>
<span></span>.box .block{display:block;}
<br>
<span></span>#status .active{background:#ccc;}
<br>
<span></span>
<br>
<span></span>window.onload = function(){
<br>
<span></span>function BannerToggle(time, obj){
<br>
<span></span>
<br>
<span></span>var time = time;
& lt; span & gt; & lt; / span & gt; / 순환 시간
<br>
<span></span>var box = document.querySelector(obj);
<br>
<span></span>var count = 1;
<br>
<span></span>var timeId = null;
<br>
<span></span>var status = document.querySelectorAll('#status span');
<br>
<span></span>
<br>
<span></span>function autoPlay(){
<br>
<span></span>if(count <= 3){
<br>
<span></span>box.querySelector('.block').className = box.querySelector('.block').className.replace('block','');
<br>
<span></span>box.querySelectorAll('div')[count].className = 'block';
<br>
<span></span>document.querySelector('#status .active').className = document.querySelector('#status .active').className.replace('active','');
<br>
<span></span>status[count].className = 'active';
<br>
<span></span>count++;
<br>
<span></span>}else{
<br>
<span></span>count = 0;
<br>
<span></span>box.querySelector('.block').className = box.querySelector('.block').className.replace('block','');
<br>
<span></span>box.querySelectorAll('div')[count].className = 'block';
<br>
<span></span>document.querySelector('#status .active').className = document.querySelector('#status .active').className.replace('active','');
<br>
<span></span>status[count].className = 'active';
<br>
<span></span>count++;
<br>
<span></span>}
<br>
<span></span>}
<br>
<span></span>
<br>
<span></span>this.init = function(){
<br>
<span></span>timeID = setInterval(autoPlay,time);
<br>
<span></span>for(var i = 0; i < status.length; i++ ){
<br>
<span></span>(function(j){
<br>
<span></span>console.log(j);
<br>
<span></span>status[j].onmouseenter = function(){
<br>
<span></span>clearInterval(timeID);
<br>
<span></span>count = j;
<br>
<span></span>console.log(count);
<br>
<span></span>box.querySelector('.block').className = box.querySelector('.block').className.replace('block','');
<br>
<span></span>box.querySelectorAll('div')[count].className = 'block';
<br>
<span></span>document.querySelector('#status .active').className = document.querySelector('#status .active').className.replace('active','');
<br>
<span></span>status[count].className = 'active';
<br>
<span></span>}
<br>
<span></span>status[j].onmouseleave = function(){
<br>
<span></span>count++;
<br>
<span></span>timeID = setInterval(autoPlay,time);
<br>
<span></span>}
<br>
<span></span>})(i);
<br>
<span></span>}
<br>
<span></span>}
<br>
<span></span>this.init();
<br>
<span></span>}
<br>
<span></span>
<br>
<span></span>var a = new BannerToggle(3000, '.box');
<br>
<span></span>}
<br>
<span></span>
<br>
<span></span>
<br>
<span></span>
1
2
3
4