轮播图插件

轮播图插件

 

/**
 * 
 * @param {ele} ele DOM元素，该元素需要在外面手动添加宽度和高度
 * @param {arr} arr 一个数组，每一项包含图片地址imgUrl 和 点击图片后跳转的地址link (link是可选属性)
 */
function createBannerArea(ele, data){
    var imgArea = document.createElement('div'); // 用于包裹角标
    var circleArea = document.createElement('div'); // 用于包裹小圆圈
    var circleColor = '#ddd'; // 圆圈颜色
    var activeCirclecolor = '#aaa' // 选择状态的圆圈颜色
    var changeTime = 3000; // 轮播定时器时间间隔
    var changeTimer = null; // 轮播定时器
    var transtion = null; // 动画定时器
    var index = 0;  // 当前显示第几张

    initImgs();
    initNumbers()
    autoChange()
    
    // 初始化图片区域
    function initImgs(){
        ele.style.overflow = 'hidden';
        imgArea.style.display = 'flex';
        imgArea.style.width = '100%';
        imgArea.style.height = '100%';
        imgArea.style.marginLeft = 0;
        for(var i = 0,  _i; i <= data.length; i++){
　　　　　　　　// _i的作用是实现无缝连接的效果
            if(i == data.length ){
                _i = 0;
            }else{
                _i = i;
            }
            var item = data[_i];
            var img = document.createElement('img');
            img.style.width = '100%';
            img.style.height = '100%';
            console.log(item)
            img.src = item.imgUrl;
            if(item.link){
                var a = document.createElement('a');
                a.style.flex = '0 0 auto'
                a.href = item.link;
                a.style.width = '100%';
                a.style.height = '100%';
                a.appendChild(img);
                imgArea.appendChild(a);
            }else{
                img.style.flex = '0 0 auto'
                imgArea.appendChild(img);
            }
        }
        imgArea.addEventListener('mouseenter', function(){
            clearInterval(changeTimer)
            changeTimer = null
        })
        imgArea.addEventListener('mouseleave', function(){
            autoChange()
        })
        ele.appendChild(imgArea)
    }

    // 初始化小圆圈
    function initNumbers(){
        circleArea.style.textAlign = 'center';
        circleArea.style.marginTop = '-40px';
        for(let i = 0; i < data.length; i++){
            var span = document.createElement('span');
            span.style.display = 'inline-block';
            span.style.width = '10px';
            span.style.height = '10px';
            span.style.borderRadius = '50%';
            span.style.margin = '10px';
            span.style.background = circleColor;
            span.style.cursor = 'pointer';
            span.addEventListener('click', function(){
                index = i;
                setStatus();
                autoChange()
            })
            circleArea.appendChild(span);
        }
        circleArea.children[0].style.background = activeCirclecolor;
        ele.appendChild(circleArea) 
    }

    // 自动切换轮播
    function autoChange(){
        if(changeTimer){
            clearInterval(changeTimer);
            changeTimer = null
        }
        changeTimer = setInterval(() => {
            if(index == data.length){
                index = 1;
            }else{
                index ++
            }
            setStatus()
        }, changeTime);
    }

    // 设置动画
    function setStatus(){
        for (var i = 0; i < data.length; i++) {
            if(i === index){
                circleArea.children[i].style.background = activeCirclecolor;
            }
            else{
                circleArea.children[i].style.background = circleColor;
            }
            if(index === data.length){
                circleArea.children[0].style.background = activeCirclecolor;
            }
        }
        var start = parseInt(imgArea.style.marginLeft);
        var end = -index * 100;
        var dis = end - start;
        var speed = dis / 500;
        if(transtion){
            clearInterval(transtion);
            transtion = null
        }
        transtion =  setInterval(() => {
            console.log(1)
            start += speed * 10;
            imgArea.style.marginLeft =  start + '%';
            if(Math.abs(end - start) < 1){
                if(index == data.length){
                    imgArea.style.marginLeft = 0 + '%';
                }else{ 
                    imgArea.style.marginLeft =  end + '%';
                }
                clearInterval(transtion);
                transtion = null
            }
        }, 10);
    }

　　// 优化处理
    document.addEventListener("visibilitychange", isDocuHidden)
      // 判断页面是hidden还是visible状态，目的是当最小化和切换其他标签页时，停止定时器，优化性能
      // visible： 页面内容至少是部分可见。 在实际中，这意味着页面是非最小化窗口的前景选项卡。
      // hidden: 页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。
    function clearTimer(){
        clearInterval(timer1);
        clearInterval(timer2);
      }
    
    function isDocuHidden(){
        if(document.visibilityState == 'hidden'){
            clearTimer()
            console.log('h')
        }else if(document.visibilityState == 'visible'){
            autoChange();
            console.log('v')
        }
    }
}