使用原生JS实现穿越火线官网轮播图

之一一定
71 阅读1分钟 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置通用样式 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 创建横向导航栏样式 */
        ul {
            list-style: none;
            display: flex;
            overflow: hidden;
        }
        /* 创建主容器样式 */
        .box {
            position: relative;
            width: 812px;
            height: 402px;
            margin: 0 auto;
            background-color: aqua;
            overflow: hidden;
        }
        /* 底部导航栏样式 */
        .bottom {
            position: absolute;
            left: 0;
            top: 363px;
            width: 812px;
            height: 39px;
            background: rgba(0, 0, 0, 0.2);
        }
        /* 底部导航栏内部列表样式 */
        .bottom .swap-li {
            display: flex;
        }
        .bottom .swap-li li {
            flex: 1;
            text-align: center;
            line-height: 39px;
        }
        .bottom .swap-li li span {
            font-size: 13px;
            color: #fff;
            cursor: pointer;
        }
        /* 底部导航栏当前项样式 */
        .bottom .swap-li .active {
            background-color: #ca2e2e;
        }
        /* 顶部导航栏样式 */
        .top {
            position: absolute;
            top: 0px;
            left: 693px;
            width: 120px;
            height: 22px;
            background: rgba(0, 0, 0);
        }
        /* 顶部导航栏内部列表样式 */
        .top .swap-top {
            display: flex;
        }
        .top .swap-top li {
            flex: 1;
            font-size: 14px;
            text-align: center;
            line-height: 22px;
            color: #fff;
            padding: 5px auto;
            cursor: pointer;
        }
        /* 顶部导航栏当前项样式 */
        .top .swap-top .active1 {
            background-color: #ff641e;
        }
        /* 操作区底部样式 */
        .operate-bottom {
            position: absolute;
            top: 287px;
            left: 259px;
            width: 400px;
            height: 6px;
        }
        /* 操作区底部列表样式 */
        .operate-bottom ul {
            width: 300px;
        }
        .operate-bottom ul li {
            float: left;
            width: 50px;
            height: 10px;
            background-color: rgb(57, 55, 56);
            margin-left: 20px;
            cursor: pointer;
        }
        /* 操作区底部当前项样式 */
        .operate-bottom ul .active2 {
            background-color: #ff641e;
        }
        /* 图片轮播容器内部列表样式 */
        .box .swap-img ul {
            transition: all .5s;
        }
        /* 操作区图片轮播容器样式 */
        .box .operate-img {
            transition: all .5s;
        }
    </style>
</head>
<body>
    <!-- 主容器 -->
    <div class="box">
        <!-- 顶部导航栏 -->
        <div class="top">
            <ul class="swap-top">
                <!-- 官方导航项 -->
                <li class="off active1">官方</li>
                <!-- 合作导航项 -->
                <li class="ope">合作</li>
            </ul>
        </div>
        <!-- 图片轮播区 -->
        <div class="swap-img">
            <ul>
                <!-- 图片列表项 -->
                <li>
                    <a href="#">
                        <img src="https://ossweb-img.qq.com/upload/adw/image/13/20230804/ccbd9e9b809efed4f73411b76626ed82.jpeg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://ossweb-img.qq.com/upload/adw/image/13/20230713/57533bfda8eb927026daaf5fe063c26e.jpeg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://ossweb-img.qq.com/upload/adw/image/13/20230717/8ad922d91d1cc2000225ce9274485a73.jpeg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://ossweb-img.qq.com/upload/adw/image/13/20230731/0ae431b9cdc3599df1dde53f306380f7.jpeg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://ossweb-img.qq.com/upload/adw/image/13/20230728/24dfea722d73ed04f16f445679c12b5f.jpeg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://ossweb-img.qq.com/upload/adw/image/13/20230808/4d42a87e4cc2f75447a904374f0500df.jpeg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://ossweb-img.qq.com/upload/adw/image/13/20230805/6ba2ca0ccc6a571b9546b84108fca219.jpeg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <!-- 底部导航栏 -->
        <div class="bottom">
            <ul class="swap-li">
                <!-- 底部导航项 -->
                <li class="active">
                    <span>火线盛典超级福利</span>
                </li>
                <li>
                    <span>年中半价特惠</span>
                </li>
                <li>
                    <span>CFxCFHD联动特惠</span>
                </li>
                <li>
                    <span>八月超级神器</span>
                </li>
                <li>
                    <span>网吧顶级福利</span>
                </li>
                <li>
                    <span>神兵专场</span>
                </li>
                <li>
                    <span>斗鱼CF嘉年华狂欢</span>
                </li>
            </ul>
        </div>
        <!-- 操作区图片轮播 -->
        <div class="operate-img" style="display: none;">
            <ul>
                <!-- 操作区图片列表项 -->
                <li>
                    <img src="https://ossweb-img.qq.com/upload/adw/image/13/20230731/7e519c8721183eb8fc0a73bfb7e34086.jpeg" alt="">
                </li>
                <li>
                    <img src="https://ossweb-img.qq.com/upload/adw/image/13/20230804/d208ef0a43d61b1ce271ab08721d4e0a.jpeg" alt="">
                </li>
                <li>
                    <img src="https://ossweb-img.qq.com/upload/adw/image/13/20230721/d26a03f8c53d653f8d8f785266fd7b64.jpeg" alt="">
                </li>
                <li>
                    <img src="https://ossweb-img.qq.com/upload/adw/image/13/20230706/a6e1af86973df5760b67c8230401c3af.jpeg" alt="">
                </li>
            </ul>
        </div>
        <!-- 操作区底部导航 -->
        <div class="operate-bottom" style="display: none;">
            <ul class="operate-ul">
                <!-- 操作区底部导航项 -->
                <li class="active2"></li>
               <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <script>
         // 获取相关元素
         const box = document.querySelector('.box');
         const lis = document.querySelectorAll('.top ul');
         const swap_top = document.querySelector('.swap-top');
         const swap_img = document.querySelector('.box .swap-img').querySelector('ul');
         const swap_img1 = document.querySelector('.box .swap-img');
         const bottom_lis = document.querySelectorAll('.box .bottom .swap-li li');
         const uls = document.querySelector('.box .bottom ul');
         const bottom = document.querySelector('.box .bottom');
         const operate_img = document.querySelector('.box .operate-img');
         const operate_bottom = document.querySelector('.box .operate-bottom');
         const operate_uls = document.querySelectorAll('.box .operate-bottom .operate-ul li');
         const off = document.querySelector('.top .swap-top .off');
         const ope = document.querySelector('.top .swap-top .ope');

         // 初始化页面
         fn();

         // 监听顶部导航“官方”点击事件
         off.addEventListener('click', function () {
            swap_img1.style.display = 'block';
            bottom.style.display = 'block';
            operate_img.style.display = 'none';
            operate_bottom.style.display = 'none';
            ope.classList.remove('active1');
            off.classList.add('active1');
            fn();
         });

         // 初始化合作模块
         fu();

         // 监听顶部导航“合作”点击事件
         ope.addEventListener('click', function () {
            clearInterval(num);
            swap_img1.style.display = 'none';
            bottom.style.display = 'none';
            operate_img.style.display = 'block';
            operate_bottom.style.display = 'block';
            off.classList.remove('active1');
            ope.classList.add('active1');
            fu();
         });

         let index;

         // 初始化底部导航切换效果
         function fn() {
            for (let i = 0; i < bottom_lis.length; i++) {
               bottom_lis[i].addEventListener('mouseenter', function () {
                  index = i;
                  document.querySelector('.box .bottom .swap-li .active').classList.remove('active');
                  document.querySelector(`.box .bottom .swap-li li:nth-child(${i + 1})`).classList.add('active');
                  swap_img.style.display = 'flex';
                  swap_img.style.marginLeft = -812 * i + 'px';
               });
            }
         }

         let i = 0;
         // 自动切换底部导航
         let num = setInterval(function () {
            i++;
            if (i >= bottom_lis.length + 1) {
               i = 1;
            }
            document.querySelector('.box .bottom .swap-li .active').classList.remove('active');
            document.querySelector(`.box .bottom .swap-li li:nth-child(${i})`).classList.add('active');
            swap_img.style.display = 'flex';
            swap_img.style.marginLeft = -812 * (i - 1) + 'px';
         }, 1000);

         // 鼠标进入底部导航栏，暂停自动切换
         bottom.addEventListener('mouseenter', function () {
            clearInterval(num);
         });

         // 鼠标离开底部导航栏，恢复自动切换
         bottom.addEventListener('mouseleave', function () {
            clearInterval(num);
            num = setInterval(function () {
               index++;
               if (index >= bottom_lis.length + 1) {
                  index = 1;
               }
               document.querySelector('.box .bottom .swap-li .active').classList.remove('active');
               document.querySelector(`.box .bottom .swap-li li:nth-child(${index})`).classList.add('active');
               swap_img.style.display = 'flex';
               swap_img.style.marginLeft = -812 * (index - 1) + 'px';
            }, 2000);
         });

         // 合作模块
         let index2;

         // 初始化合作模块切换效果
         function fu() {
            for (let i = 0; i < operate_uls.length; i++) {
               operate_uls[i].addEventListener('mouseenter', function () {
                  index2 = i;
                  document.querySelector('.box .operate-bottom .operate-ul .active2').classList.remove('active2');
                  document.querySelector(`.box .operate-bottom .operate-ul li:nth-child(${i + 1})`).classList.add('active2');
                  operate_img.style.display = 'flex';
                  operate_img.style.marginLeft = -812 * i + 'px';
               });
            }
         }

         let j = 0;
         // 自动切换合作模块
         let num2 = setInterval(function () {
            j++;
            if (j >= operate_uls.length + 1) {
               j = 1;
            }
            document.querySelector('.box .operate-bottom .operate-ul .active2').classList.remove('active2');
            document.querySelector(`.box .operate-bottom .operate-ul li:nth-child(${j})`).classList.add('active2');
            operate_img.style.display = 'flex';
            operate_img.style.marginLeft = -812 * (j - 1) + 'px';
         }, 1000);

         // 鼠标进入合作模块，暂停自动切换
         operate_bottom.addEventListener('mouseenter', function () {
            clearInterval(num2);
         });

         // 鼠标离开合作模块，恢复自动切换
         operate_bottom.addEventListener('mouseleave', function () {
            clearInterval(num2);
            num2 = setInterval(function () {
               index2++;
               if (index2 >= operate_uls.length + 1) {
                  index2 = 1;
               }
document.querySelector('.box .operate-bottom .operate-ul .active2').classList.remove('active2');
document.querySelector(`.box .operate-bottom .operate-ul li:nth-child(${index2})`).classList.add('active2');
operate_img.style.display = 'flex';
operate_img.style.marginLeft = -812 * (index2 - 1) + 'px';
            }, 2000);
         });
    </script>
</body>
</html>
avatar
文章
阅读
粉丝