JS学习小结（选项卡实现、轮播图实现完整版） - JS学习笔记

首页 > 博客列表 > JS学习小结（选项卡实现、轮播图实现完整版）

博主信息

博文 20

粉丝 0

访问量 19983

专题推荐

更多>

1.选项卡

选项卡需要用到一个classList属性，通过该属性加方法的方式，来增、删、改元素的css样式。

classList.add() 增加样式
classList.remove() 删除样式
classList.replace()替换样式

选项卡还会用到自定义属性

比如，class=”data-index”，以data-自定义属性名的方式命名，
读取自定义属性需要用到 dataset.自定义属性名
示例代码如下

<div class=".box">
    <ul class="tab">
        <li data-index="1" class="active">html教程</li>
        <li data-index="2">JS小结</li>
        <li data-index="3">php代码</li>
    </ul>
    <ul data-index="1" class="item active">
        <li>html教程1</li>
        <li>html教程2</li>
        <li>html教程3</li>
    </ul>
    <ul data-index="2" class="item">
        <li>JS小结1</li>
        <li>JS小结1</li>
        <li>JS小结1</li>
    </ul>
    <ul data-index="3" class="item">
        <li>php代码1</li>
        <li>php代码1</li>
        <li>php代码1</li>
    </ul>
</div>
    <script>
        const tab = document.querySelector(".tab");
        const item = document.querySelectorAll('.item');
        console.log(item);
        tab.onclick = (ev)=>{
            [...tab.children].forEach(item=>
                item.classList.remove('active'));
            ev.target.classList.add('active');
            item.forEach(item=>item.classList.remove("active"));
            [...item].filter(item=>item.dataset.index === ev.target.dataset.index)[0].classList.add('active');
        };
    </script>

2.轮播图（补全版）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="banner/style.css" />
</head>
<body>
    <div class="container">
        <!-- 1. 图片组 -->
        <nav class="imgs">
            <a href=""><img src="banner/banner1.jpg" alt="" data-index="1" class="active" /></a>
            <a href=""><img src="banner/banner2.jpg" alt="" data-index="2" /></a>
            <a href=""><img src="banner/banner3.jpg" alt="" data-index="3" /></a>
            <a href=""><img src="banner/banner4.jpg" alt="" data-index="4" /></a>
        </nav>
        <!-- 2. 图片小按钮 -->
        <nav class="btns">
            <!-- 这些小按钮应该根据图片数量自动生成 -->
            <!-- <a href="" data-index="1" class="active"></a>
        <a href="" data-index="2"></a>
        <a href="" data-index="3"></a>
        <a href="" data-index="4"></a> -->
        </nav>
        <!-- 3. 翻页 -->
        <nav class="skip">
            <a href="#" class="prev">&lt;</a>
            <a href="#" class="next">&gt;</a>
        </nav>
    </div>
    <script>
        // 所有图片
        const imgs = document.querySelectorAll(".container > .imgs img");
        // 按钮组
        const btnGroup = document.querySelector(".container > .btns");
        // 翻页按钮
        const skip = document.querySelector(".container > .skip");
        // 创建出一组与图片数量对应的小按钮
        function autoCreateBtns(ele, imgLength) {
            const frag = document.createDocumentFragment();
            for (let i = 0; i < imgLength; i++) {
                const a = document.createElement("a");
                a.href = "#";
                a.dataset.index = i + 1;
                if (i === 0) a.classList.add("active");
                frag.appendChild(a);
            }
            ele.appendChild(frag);
        }
        // 调用创建小按钮的函数
        autoCreateBtns(btnGroup, imgs.length);
        // 为刚刚生成的小按钮们添加点击事件
        const btns = document.querySelectorAll(".container > .btns > *");
        // 下面声明二个公共函数
        // 1. 获取激活的元素
        function getActiveEle(eles) {
            let activities = [...eles].filter(img => img.classList.contains("active"));
            return activities.shift();
        }
        // 2. 设置激活的元素,根据按钮索引更新正在显示的图片
        function setActiveEle(btnIndex) {
            [imgs, btns].forEach(arr => {
                // 将之前的状态全部重置到初始化(清空)
                getActiveEle(arr).classList.remove("active");
                arr.forEach(item => {
                    if (item.dataset.index === btnIndex) {
                        item.classList.add("active");
                    }
                });
            });
        }
        // 为每一个小按钮添加事件
        btns.forEach(btn => btn.addEventListener("click", ev => setActiveEle(ev.target.dataset.index)));
        //   1. 为翻页按钮添加功能
        //   1.1 获取当前激活元素的上一个元素自定义属性序号
        function prevActiveEle(eles) {
            let indexNumber = getActiveEle(eles).dataset.index;
            if (indexNumber == 1) {
                return String(eles.length);
            } else {
                return String(indexNumber - 1);
            }
        }
        //   1.2 获取当前激活元素的下一个元素自定义属性序号
        function nextActiveEle(eles) {
            let indexNumber = getActiveEle(eles).dataset.index;
            if (indexNumber == eles.length) {
                return 1 + "";
            } else {
                return String(Number(indexNumber) + 1);
            }
        }
        //   1.3 为上翻页按钮添加点击事件        
        skip.children[0].addEventListener('click',()=>setActiveEle(prevActiveEle(imgs)));
        //   1.4 为下翻页按钮添加点击事件        
        skip.children[1].onclick =()=>setActiveEle(nextActiveEle(imgs));
        //   2. 当鼠标移出时,图片的每隔2秒的自动播放,当鼠标移入时自动停止播放
        //   2.1 创建派发事件 
        const evclick = new Event('click'); 
        //   2.2 使用间歇式定时器，给下翻页按钮添加事件派发,间隔2秒
        let timer = setInterval('skip.children[1].dispatchEvent(evclick)',2000);
        //   2.3 获取图片组的父元素
        const imgsBox = document.querySelector(".container");
        //   2.4 当鼠标移入时自动停止播放
        imgsBox.onmouseover=()=>clearInterval(timer);
        //   2.5 当鼠标移除时继续自动播放
        imgsBox.onmouseout=()=>timer = setInterval('skip.children[1].dispatchEvent(evclick)',2000);
    </script>
</body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html常用标签的用法汇总

2020-12-29 21:48:15