选项卡轮播三种写法

作者: 心存美好 | 来源:发表于2022-03-16 17:29 被阅读0次

选项卡轮播三种写法
多层选项卡轮播es6写法与es5添加删除类名写法
轮播单边、循环模式切换写法
第八章选项卡和轮播图
uniapp常用小案例收集：
2019-01-18计划与总结
day30-作业
day10-作业
vue2.0音乐播放器Bscroll新写法
轮播图（2018-08-09）

选项卡轮播普通写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: "Microsoft YaHei", serif;
        }

        body,
        dl,
        dd,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0;
        }

        ol,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            border: none;
        }

        #wrap {
            position: relative;
            width: 780px;
            height: 380px;
            margin: 50px auto 0;
            user-select: none;
        }

        #img {
            position: relative;
            width: 100%;
            height: 330px;
        }

        #img ul {
            width: 100%;
            height: 100%;
        }

        #img li {
            display: none;
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #img li.show {
            display: block;
        }

        #tab {
            overflow: hidden;
            width: 100%;
            height: 50px;
            background-color: pink;
        }

        #tab ul {
            width: 100%;
            height: 100%;
            background-color: skyblue;
        }

        #tab li {
            float: left;
            width: 20%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #000;
            font-size: 12px;
            color: #eee;
            cursor: pointer;
        }

        #tab li.active {
            background-color: #303030;
            color: #e9c06c;
        }

        #arrow div {
            position: absolute;
            top: 50%;
            width: 40px;
            height: 60px;
            margin-top: -30px;
            line-height: 60px;
            text-align: center;
            font-size: 12px;
            background-color: #000;
            color: #fff;
            cursor: pointer;
        }

        #arrow div.left {
            left: 0;
        }

        #arrow div.right {
            right: 0;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <!-- 图片部分对应的布局 -->
        <div id="img">
            <ul>
                <li class="show"><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
            </ul>
        </div>
        <!-- 按钮部分对应的布局 -->
        <div id="tab">
            <ul>
                <li class="adtive">开黑吗</li>
                <li>我亚索贼6</li>
                <li>只要我E的够快</li>
                <li>队友的问号</li>
                <li>就跟不上我</li>
            </ul>
        </div>
        <!-- 左右按钮对应的布局 -->
        <div id="arrow">
            <div class="left">
                < </div>
                    <div class="right">></div>
            </div>
        </div>


        <script>
            //选项卡轮播

            //获取元素
            let aImgLi = document.querySelectorAll('#img ul li');//所有#img下的LI
            let aTabLi = [...document.querySelectorAll('#tab ul li')];//所有#tab下的LI
            let aArrow = document.querySelectorAll('#arrow div');//所有#arrow下的div
            //信号量
            let num = 0;
            let len = aImgLi.length;
            //绑定事件
            aArrow[0].onclick = function () {
                aImgLi[num].className = ''//清空之前aImgLi的class类名清空
                aTabLi[num].className = ''//清空之前aTabLi的class类名清空
                num--;

                if (num < 0) num = len - 1;//校验
                aImgLi[num].className = 'show'
                aTabLi[num].className = 'active'
            }
            aArrow[1].onclick = function () {
                aImgLi[num].className = ''//清空之前aImgLi的class类名清空
                aTabLi[num].className = ''//清空之前aTabLi的class类名清空
                num++;
                if (num > len - 1) num = 0;//校验
                aImgLi[num].className = 'show'
                aTabLi[num].className = 'active'
            }
            // aTabLi批量绑定事件
            aTabLi.forEach((oLi, index) => {
                oLi.onclick = function () {
                    aImgLi[num].className = '';
                    aTabLi[num].className = '';
                    num = index;
                    aImgLi[num].className = 'show'
                    aTabLi[num].className = 'active'
                }
            })
        </script>

</body>

</html>

选项卡轮播抽离优化写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: "Microsoft YaHei", serif;
        }

        body,
        dl,
        dd,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0;
        }

        ol,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            border: none;
        }

        #wrap {
            position: relative;
            width: 780px;
            height: 380px;
            margin: 50px auto 0;
            user-select: none;
        }

        #img {
            position: relative;
            width: 100%;
            height: 330px;
        }

        #img ul {
            width: 100%;
            height: 100%;
        }

        #img li {
            display: none;
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #img li.show {
            display: block;
        }

        #tab {
            overflow: hidden;
            width: 100%;
            height: 50px;
            background-color: pink;
        }

        #tab ul {
            width: 100%;
            height: 100%;
            background-color: skyblue;
        }

        #tab li {
            float: left;
            width: 20%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #000;
            font-size: 12px;
            color: #eee;
            cursor: pointer;
        }

        #tab li.active {
            background-color: #303030;
            color: #e9c06c;
        }

        #arrow div {
            position: absolute;
            top: 50%;
            width: 40px;
            height: 60px;
            margin-top: -30px;
            line-height: 60px;
            text-align: center;
            font-size: 12px;
            background-color: #000;
            color: #fff;
            cursor: pointer;
        }

        #arrow div.left {
            left: 0;
        }

        #arrow div.right {
            right: 0;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <!-- 图片部分对应的布局 -->
        <div id="img">
            <ul>
                <li class="show"><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
            </ul>
        </div>
        <!-- 按钮部分对应的布局 -->
        <div id="tab">
            <ul>
                <li class="adtive">开黑吗</li>
                <li>我亚索贼6</li>
                <li>只要我E的够快</li>
                <li>队友的问号</li>
                <li>就跟不上我</li>
            </ul>
        </div>
        <!-- 左右按钮对应的布局 -->
        <div id="arrow">
            <div class="left">
                < </div>
                    <div class="right">></div>
            </div>
        </div>


        <script>
            //选项卡轮播

            //获取元素
            let aImgLi = document.querySelectorAll('#img ul li');//所有#img下的LI
            let aTabLi = [...document.querySelectorAll('#tab ul li')];//所有#tab下的LI
            let aArrow = document.querySelectorAll('#arrow div');//所有#arrow下的div
            //信号量
            let num = 0;
            let len = aImgLi.length;
            //优化绑定左右点击事件
            aArrow[0].onclick = function () {
                let x = num;   //num是没有改变的索引，x是改变后的索引
                x--
                change(x)
            }
            aArrow[1].onclick = function () {
                let x = num;
                x++
                change(x)
            }
            // aTabLi批量绑定事件
            aTabLi.forEach((oLi, index) => {
                oLi.onclick = function () {
                   change(index)
                }
            })
            //优化写法定义一个函数
            function change(x){
                aImgLi[num].className = ''//清空之前aImgLi的class类名清空
                aTabLi[num].className = ''//清空之前aTabLi的class类名清空
                num = x;
               if(num>=len) num=0;// 两端的判断条件
               if(num<0)num=len-1
                aImgLi[num].className = 'show'
                aTabLi[num].className = 'active'
            }
            
        </script>

</body>

</html>

选项卡轮播再抽离优化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: "Microsoft YaHei", serif;
        }

        body,
        dl,
        dd,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0;
        }

        ol,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        img {
            border: none;
        }

        #wrap {
            position: relative;
            width: 780px;
            height: 380px;
            margin: 50px auto 0;
            user-select: none;
        }

        #img {
            position: relative;
            width: 100%;
            height: 330px;
        }

        #img ul {
            width: 100%;
            height: 100%;
        }

        #img li {
            display: none;
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        #img li.show {
            display: block;
        }

        #tab {
            overflow: hidden;
            width: 100%;
            height: 50px;
            background-color: pink;
        }

        #tab ul {
            width: 100%;
            height: 100%;
            background-color: skyblue;
        }

        #tab li {
            float: left;
            width: 20%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #000;
            font-size: 12px;
            color: #eee;
            cursor: pointer;
        }

        #tab li.active {
            background-color: #303030;
            color: #e9c06c;
        }

        #arrow div {
            position: absolute;
            top: 50%;
            width: 40px;
            height: 60px;
            margin-top: -30px;
            line-height: 60px;
            text-align: center;
            font-size: 12px;
            background-color: #000;
            color: #fff;
            cursor: pointer;
        }

        #arrow div.left {
            left: 0;
        }

        #arrow div.right {
            right: 0;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <!-- 图片部分对应的布局 -->
        <div id="img">
            <ul>
                <li class="show"><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
            </ul>
        </div>
        <!-- 按钮部分对应的布局 -->
        <div id="tab">
            <ul>
                <li class="adtive">开黑吗</li>
                <li>我亚索贼6</li>
                <li>只要我E的够快</li>
                <li>队友的问号</li>
                <li>就跟不上我</li>
            </ul>
        </div>
        <!-- 左右按钮对应的布局 -->
        <div id="arrow">
            <div class="left">
                < </div>
                    <div class="right">></div>
            </div>
        </div>


        <script>

            //获取元素
            let aImgLi = [...document.querySelectorAll('#img ul li')];//批量绑定转成数组
            let aTabLi = [...document.querySelectorAll('#tab ul li')];//批量绑定转成数组
            let aArrow = document.querySelectorAll('#arrow div');
            //信号量
            let num = 0;
            let len = aImgLi.length;
        
            // aTabLi批量绑定事件
            aTabLi.forEach((oLi, index) => {
                oLi.onclick = function () {
                    change(index)
                }
            })
            //左右点击也批量绑定
            aArrow.forEach((oImg, index) => {
                oImg.onclick = function () {
                    let x = num;
                    !!index ? x++ : x--;
                    change(x)
                }
            })
            //优化写法定义一个函数
            function change(x) {
                aImgLi[num].className = ''
                aTabLi[num].className = ''
                num = x;
                if (num >= len) num = 0;
                if (num < 0) num = len - 1
                aImgLi[num].className = 'show'
                aTabLi[num].className = 'active'
            }

        </script>

</body>

</html>

选项卡轮播三种写法
选项卡轮播普通写法选项卡轮播抽离优化写法选项卡轮播再抽离优化
多层选项卡轮播es6写法与es5添加删除类名写法
多层选项卡轮播es6写法 ES5添加删除类名需要切割数组拼接数组，ES6使用classList
轮播单边、循环模式切换写法
轮播单边、循环模式切换基本写法轮播单边、循环模式切换优化写法
第八章选项卡和轮播图
一,选项卡二,简单的轮播图
uniapp常用小案例收集：
轮播图、选项卡、新闻栏目、登录界面、个人列表
2019-01-18计划与总结
每日计划 1.轮播图写完 2.选项卡在网上找一个 3.博达视频总结学了些js，边学边写把轮播图和选项卡都完成了...
day30-作业
1、全选 2、选项卡 3、汽车轮播 4、爱奇艺
day10-作业
1、实现全选、全不选、反选 2、选项卡 3、汽车轮播 4、爱奇艺
vue2.0音乐播放器Bscroll新写法
1 由于BScroll升级原先的轮播图写法不行了，会报错具体详细写法:新的写法（loop）https://gi...
轮播图（2018-08-09）
轮播图在生活中很常见，比如网页的广告宣传什么的。轮播图的写法也有很多种，有手动点击轮播的，还有自动轮播的，当然也有...