简单轮播图原理

今天来做一个简单的轮播图

            

                

                    

                        
                    
                    

                        
                    
                    

                        
                    
                
            
            
                <
                    >
                    

                        

                            

                            

                            

                        
                    
        
    

排版部分大致如上图所示；今天说的轮播图大致原理就是单独给一张图片和一个页码添加一个类名；图片类名携带display-block属性；其余的隐藏掉；给页码类名设一个背景颜色

var pic = document.querySelectorAll('.lunbo>.sweper-lunbo>ul>li');
// 找到每张图片
var pag = document.querySelectorAll('.lunbo>.pages>ul>li');
// 找到每个页码
var lunbo = document.querySelector('.lunbo');
// 找到大盒子
var lbtn = document.querySelector('.l-btn')
// 找到左按钮
var rbtn = document.querySelector('.r-btn')
// 找到右按钮

先获取到图片，页码，大盒子，左右按钮

var idx = 0;
var timer = null;

// 图片页码对应下标功能
function autoplay () {
    for(var i = 0; i < pic.length; i++) {
        pic[i].className = i === idx  ? 'active' : '';
        pag[i].className = i === idx  ? 'page' : '';
    }
}

// 定时器功能
function startoplay () {
   if (!timer) {
    timer = setInterval (function () {
        idx++;

        // 边界值
        idx %= pic.length;
        autoplay();
    },1000)   
   }
}

startoplay();

// 鼠标划入大盒子清除定时器，停止轮播
lunbo.onmouseover = function () {
    clearInterval(timer);
    timer = null;
};

// 鼠标离开大盒子;继续轮播
lunbo.onmouseleave = function () {
    startoplay();
}

// 左按钮事件
lbtn.onclick = function () {
    if (idx-1 <  0) {
        idx = pic.length-1;
    }else {
        idx--
    }
    autoplay();
}

// 右按钮事件
rbtn.onclick = function () {
    // if (idx +1 > pic.length-1) {
    //     idx = 0;
    // }else {
    //     idx++
    // }
    idx +1 > pic.length-1 ?idx = 0 : idx++;
    autoplay();
}


// 划入页码对应图片;tap切换
for(var i = 0; i < pic.length; i++) {
    (function (idx) {
        pag[idx].onmouseover = function () {
            for (var k = 0 ;k < pic.length; k++) {
                pic[k].classList.remove('active')
                pag[k].classList.remove('page')
            }
            pic[idx].classList.add('active')
            pag[idx].classList.add('page')
        }
    })(i)
}