【学习笔记56】轮播图的分析

笔记首发

一、轮播图效果图

1、轮播图的效果

2、轮播图的原理

二、复制第一个图和最后一个图

原本的图

// 根据轮播图 调整页面效果
function myPage() {
    /* 将ul的开头和结尾 放置两张假图 */

    // 复制ul内部第一个元素和最后一个元素(克隆)
    const firstEle = oImgBox.firstElementChild.cloneNode(true);
    const lastEle = oImgBox.lastElementChild.cloneNode(true);

    // // 将第一图插入父级末位，当做一个假图
    // oImgBox.appendChild(firstEle);

    // // 将最后一个图片插入父级开头，当作一个假图
    // oImgBox.insertBefore(lastEle, oImgBox.firstElementChild)

    // 处理ul的宽度 === 内部所有li的数量 * 可视区域的宽度
    oImgBox.style.width = oImgBox.children.length * bannerWidth + 'px'
    // 处理ul的定位
    oImgBox.style.left = -(index * bannerWidth) + 'px';
}

// 调用函数
myPage()

复制后的假图

三、动态生焦点

焦点是根据图片动态生的

function setFocus() {
    // 图片和焦点一一对应 不需要考虑复制的两张假图
    let imgBoxLength = oImgBox.children.length - 2;

    // 循坏遍历
    for (let i = 0; i < imgBoxLength; i++) {
        // 动态生li标签
        let newLi = document.createElement('li');
        
        // 给生成的标签添加类名
        newLi.classList.add('newLiItem');

        // 给生成的标签 添加id属性值
        newLi.dataset.id = i;

        // 给第一个标签添加active
        if (i === 0) {
            newLi.classList.add('active');
        }
        // 将生成的li 添加到页面中去
        oFocus.appendChild(newLi);
    }
}

// 调用函数
setFocus()

四、自动轮播

调用运动函数，实现自动轮播

// 自动轮播
function animation() {
    /**
     *  当前在 第1个 真图 -600px
     *  当前在 第2个 真图 -1200px
     *  当前在 第3个 真图 -1800px
     *  当前在 第x个 真图 -(x * 视口宽度)px
     */
    
    // 运动函数只能执行移出 通过定时器达到切换的效果
    time = setInterval(function () {
        // 在第一页的基础上累加
        index++;
        // 调用运动函数
        move(oImgBox, { left: -(index * bannerWidth) }, moveEnd);
    
    }, 2000)
}

// 调用函数
animation()

五、拦截轮播图，让其滚动播放

// 拦截轮播图 让其滚动播放
function moveEnd() {
    // 当页面滚动到最后一张假图时 让其滚动到第一张真图
    if (index === oImgBox.children.length - 1) {
        // 当前也为第一页
        index = 1;
        // 添加到第一页的距离
        oImgBox.style.left = -(index * bannerWidth) + 'px'
    }

    // 当页面滚动到第一张假图时 让其滚动到倒数第二张真图
    if(index === 0){
        // 当前页为倒数第二页
        index = oImgBox.children.length - 2;
        // 添加到倒数第二页的距离
        oImgBox.style.left = -(index * bannerWidth) + 'px'
    }
                                                         
    // 让焦点跟随高亮显示
    for (let i = 0; i < oFocus.children.length; i++) {
        // 循坏遍历 移出所有的active
        oFocus.children[i].classList.remove('active')
    }
    // 给单签的页添加active (index - 1)因为真图片前面有一张假图
    oFocus.children[index - 1].classList.add('active');
    // 运动函数结束 将开关打开
    flag = true;
}

// 调用函数
moveEnd()

六、鼠标移入移出事件

// 鼠标移入移出事件
function mouseOut() {
    // 鼠标移入banner结束 结束自动轮播
    oBanner.addEventListener('mouseover', () => {
        clearInterval(time);
    })

    // 鼠标移出 自动轮播
    oBanner.addEventListener('mouseout', () => {
        // 调用轮播函数
        animation();
    })
}

// 调用函数
mouseOut()

七、鼠标点击事件

// 鼠标点击事件
function clickBtn() {
    oBanner.addEventListener('click', function (e) {
        // 右按钮事件
        if (e.target.className === 'right') {
            if(!flag) return;
            // 运动函数开始前 关闭开关 直到运动函数结束时打开开关
            flag = false;
            // 页面累加
            index++;
            // 调用运动函数
            move(oImgBox, { left: -(index * bannerWidth) }, moveEnd);
        }

        // 左按钮事件
        if (e.target.className === 'left') {
            if(!flag) return;
            // 运动函数开始前 关闭开关 直到运动函数结束时打开开关
            flag = false;
            // 页面累减
            index--;
            // 调用运动函数
            move(oImgBox, { left: -(index * bannerWidth) }, moveEnd);
        }

        // 焦点事件
        if(e.target.className === 'newLiItem'){
            if(!flag) return;
            // 运动函数开始前 关闭开关 直到运动函数结束时打开开关
            flag = false;
            // 减0 是为了将(e.target.dataset.id)转化为数值类型
            index = e.target.dataset.id - 0 + 1;
            // 调用运动函数
            move(oImgBox, { left: -(index * bannerWidth) }, moveEnd);
        }
    })
}

// 调用函数
clickBtn()

鼠标在点击左按钮时 需要添加拦截事件（在拦截轮播图中添加）

八、页面关闭抖动

/**
 *      当页面关闭时(最小化)时, 此时 DOM 不会在发生变化
 *
 *      但是我们的代码不会停止, 也就是定时器会一直执行
 *
 *      当我们再次打开页面时, 此时 DOM的真实数据, 与代码的数据已经不同
 *
 *  解决:
 *          在页面关闭, 停止定时器
 *          再次打开页面时, 开启定时器
 */

// 页面关闭抖动
document.addEventListener('visibilitychange', function(){
    // visibilityState有hidden和hidden两个值
    // hidden 页面最小化
    if(document.visibilityState === 'hidden'){
        clearInterval(time);
    }

    // visible 页面打开
    if(document.visibilityState === 'visible'){
        animation()
    }
})