【JS作业0228】选项卡、懒加载、轮播图实战

编程思路

1、选项卡：主要搞清楚1.点击事件改变样式，2.根据index显示详情，3.未激活详情先隐藏display：none；
2、轮播图：与选项卡类似，增加点击翻页，定时器，逻辑有点多，一步步来
3、懒加载：理解offsetTop <= clientHeight + scrollTop即图片进去可视区，据此改变图片的src值

作业总结

这次作业把JS基本的DOM操作算是过了一遍了，最深刻的就是addEventLisenter()。轮播图是这里面逻辑最复杂的一个，要做三个功能，先做的选项卡，搞半天没反应（常态了哈哈），最后发现未激活详情先隐藏display：none；突然就理解了，核心就是事件发生后改变样式这一点就好做了。后面做轮播图因为类似，逻辑也可以借鉴，其实顺利多了，懒加载就更简单了，理解offsetTop <= clientHeight + scrollTop就可以做出来了！
这次其实是在做自己的网站了，选项卡开始做的想哭啊，总算做成了。基础的还是要会，以后用jQuery就更爽了！

代码效果

1. 选项卡

• 部分代码

<!-- 选项卡控制脚本-->
<script>
    // 1.获取标签导航
    var tabNav = document.querySelector('.tab-nav');
    // console.log(tabNav);
    var navArr = Array.from(tabNav.firstElementChild.children);
    // console.log(navArr);
    var details = document.querySelectorAll('.detail');
    // console.log(details);
    // 2.委托父级事件对象
    tabNav.addEventListener('click', showDetail, false);
    // 3.监听点击事件
    function showDetail(ev) {
        // console.log(ev.target.nodeName);
        // 判断点击的是否是导航标签
        if (ev.target.nodeName === "LI") {
            navArr.forEach(function (nav) {
                nav.classList.remove('tabon')
            });
            ev.target.classList.add('tabon');
            // 4.匹配对应标签详情
            // 4.1.清空激活的详情样式，根据data-index属性对应标签，设置当前内容
            details.forEach(function (detail) {
                detail.classList.remove('xqon')
            });
            // 4.2.判断标签与详情data-index相等，显示详情
            details.forEach(function (detail) {
                if (detail.dataset.index === ev.target.dataset.index) {
                    detail.classList.add('xqon');
                }
            });
        }
    }
</script>

• 效果展示

2. 轮播图

• 部分代码

<script>
        // 获取到所有的图片
        var imgs = document.querySelectorAll('img');
        console.log(imgs);
        // 获取小圆点的父节点
        var pointList = document.querySelector('.point-list');
        // 动态生成小圆点
        imgs.forEach(function (img, index) {
            var span = document.createElement('span');
            // 默认显示第一张图片，所以第一个小圆点应该激活
            if (index === 0) {
                span.classList.add('point', 'dianOn');
            }
            span.classList.add('point');
            // 将小圆点与当前的图片进行关联
            span.dataset.index = img.dataset.index;
            // 将小圆点添加到页面中
            pointList.appendChild(span);
        });
        // 为小圆点添加点击事件，让图片动起来
        // 获取所有的小圆点
        var points = document.querySelectorAll('.point');
        // 为每个小圆点添加点击事件
        points.forEach(function (point) {
            point.addEventListener('click', function (ev) {
                imgs.forEach(function (img) {
                    if (img.dataset.index === ev.target.dataset.index) {
                        imgs.forEach(function (img) {
                            img.classList.remove('picOn');
                        });
                        img.classList.add('picOn');
                        // 设置小圆点的当前激活状态，与图片同步显示
                        setPointActive(img.dataset.index);
                    }
                })
            }, false);
        });
        // 设置小圆点高亮
        function setPointActive(imgIndex) {
            // 清除之前的小圆点的激活
            points.forEach(function (point) {
                point.classList.remove('dianOn');
            });
            points.forEach(function (point) {
                if (point.dataset.index === imgIndex) point.classList.add('dianOn');
            });
        }
        // 翻页功能
        var skip = document.querySelectorAll('.skip');
        skip.item(0).addEventListener('click', skipImg, false);
        skip.item(1).addEventListener('click', skipImg, false);
        // 翻页显示图片的函数
        function skipImg(ev) {
            // 获取当前正在显示的图片
            var currentImg = null;
            imgs.forEach(function (img) {
                // 当前图片是否有'active'
                if (img.classList.contains('picOn')) {
                    currentImg = img;
                }
            });
            // 1.判断点击的是显示前一张的按钮，显示前一张图片
            if (ev.target.classList.contains('prev')) {
                // 去掉当前图片的激活状态
                currentImg.classList.remove('picOn');
                // 获取前一张图片
                currentImg = currentImg.previousElementSibling;
                // 如果存在前一张
                if (currentImg !== null && currentImg.nodeName === 'IMG') {
                    currentImg.classList.add('picOn');
                } else {
                    // 如果不存在前一张
                    currentImg = imgs[imgs.length - 1];
                    currentImg.classList.add('picOn');
                }
            }
            // 2.判断点击的是显示后一张的按钮，显示后一张图片
            if (ev.target.classList.contains('next')) {
                // 去掉当前图片的激活状态
                currentImg.classList.remove('picOn');
                // 获取后一张图片
                currentImg = currentImg.nextElementSibling;
                // 如果存在后一张
                if (currentImg !== null && currentImg.nodeName === 'IMG') {
                    currentImg.classList.add('picOn');
                } else {
                    // 如果不存在后一张
                    currentImg = imgs[0];
                    currentImg.classList.add('picOn');
                }
            }
            // 设置小圆点的高亮
            setPointActive(currentImg.dataset.index);
        }
        // 定时器自动播放
        var picEr = document.querySelector('.picSilde');
        var timer = null;
        // 创建鼠标移入事件的监听器
        picEr.addEventListener('mouseover', function () {
            clearInterval(timer);
        }, false);
        // 移出时自动播放轮播图
        picEr.addEventListener('mouseout', function () {
            // 创建一个时间模拟器
            var clickEvent = new Event('click');
            timer = setInterval(function () {
                skip.item(1).dispatchEvent(clickEvent);
            }, 3000);
        })
    </script>

• 效果展示

3. 懒加载

• 部分代码

<script>
    // 1.获取所有图片
    var imgs = document.querySelectorAll('img');
    // 2.获取可视区高度
    var userHeight = document.documentElement.clientHeight;
    console.log(userHeight);
    // 3.监听窗口滚动事件
    window.addEventListener('scroll', function() {
        // 3.1 滚动的距离
        var scrollTop = document.documentElement.scrollTop;
        console.log(scrollTop);
        // 3.2 遍历所有图片,判断图片是否进入可视区，图片相对高度小于可视区+滚动距离即进入了可视区
        imgs.forEach(function(img) {
            if (img.offsetTop <= (userHeight + scrollTop)) {
                img.src = img.dataset.src;
            }
        });
    }, false);
</script>

• 效果展示