前端实践-JS手写轮播图 | 豆包MarsCode AI刷题

前言-为什么要学会原生

今天来通过一个完整的项目实例来演示如何使用JavaScript实现某个功能或解决某个问题。本次想给大家介绍的是用原生的写法来实现js轮播图，虽然现在市面上有很多成型的轮播图组件库，比如swagger UI等等，但是有些时候，原生写法依旧十分有必要学会。 毕竟它有很强的性能优化，原生代码通常比依赖第三方库或框架的代码执行得更快，因为它直接与浏览器的渲染引擎交互，没有额外的抽象层。其次， 使用原生代码可以提供对网页元素和行为的完全控制，这对于需要精确控制布局、样式和交互的复杂项目来说非常重要。 还有最重要的一点是，原生代码在所有现代浏览器中都能得到一致的支持，而第三方库或框架可能在某些浏览器或版本中存在兼容性问题。

效果展示

模仿某游戏官网轮播图

步骤

html页面

先创建一个HTML结构来容纳轮播图。这通常包括一个容器元素，比如<div>，以及一个列表元素，比如<ul>，来包含所有的轮播项。每个轮播项通常是一个链接<a>，包含一个图片<img>和一些描述性文字。

示例：

<li class="wgBanner-box first_active">

    <a href="#">

        <img src="images/ff14.webp"width=100%>

        <div class="wgBanner-write">

            <h2>不可错过的IGN高分MMO大作</h2>

            <div class="wgBanner-write_box">

                <div class="wgBanner-write_box_write">

                    <span class="ff1401">口碑榜TOP&nbsp5</span>

                </div>

                <div class="wgBanner-write_box_write">

                    <span class="ff1401">火爆榜TOP&nbsp5</span>

                </div>

            </div>

            <h5>时长付费</h5>

        </div>

        <div class="concern">

            <div class="concern_game"><span>关注游戏</span></div>

            <div class="and" id="and"><span></span>

        </div>

        <div class="concern_menu" id="feedback">

            <div class="triangle"></div>

            <ul class="concern_dropdown-menu">

                <li class="concern_dropdown-menu_li">不感兴趣？</li>

                <div>

                    <li class="concern_dropdown-menu_li">素材不好看</li>

                    <li class="concern_dropdown-menu_li">游戏不喜欢</li>

                    <li class="concern_dropdown-menu_li">看过了</li>

                </div>

            </ul>

        </div>

    </a>

</li>

然后我们还需要一个菜单栏部分，类似于小圆点的功能，可以点击切换。 示例：

<ul class="wgBanner-menu_ul">

    <li class="wgBanner-menu_ul_li active" data-index='0'><a href="#"><span>最终幻想14</span></a></li>

    <li class="wgBanner-menu_ul_li" data-index='1'><a href="#"><span>崩坏3</span></a></li>

    <li class="wgBanner-menu_ul_li" data-index='2'><a href="#"><span>英雄联盟</span></a></li>

    <li class="wgBanner-menu_ul_li" data-index='3'><a href="#"><span>模拟经营专题</span></a></li>

    <li class="wgBanner-menu_ul_li" data-index='4'><a href="#"><span>只只大冒险</span></a></li>

    <li class="wgBanner-menu_ul_li" data-index='5'><a href="#"><span>激战2</span></a></li>

    <li class="wgBanner-menu_ul_li" data-index='6'><a href="#"><span>乱世逐鹿</span></a></li>

    <li class="wgBanner-menu_ul_li" data-index='7'><a href="#"><span>剑网3缘起</span></a></li>

</ul>

css样式

样式思路就是为了创建一个轮播图效果，其中多个图片（或其他内容）在一个容器中依次展示。叠放起来，到某一张图需要展示的时候，就增加active，顶层显示。

1. 容器设置：

   • .Carousel-figure 是轮播图的容器，它被设置为相对定位（position: relative），并且有一个固定的高度（height: 460px）和宽度（width: 1000px）。
   • 容器还设置了圆角边框（border-radius: 8px）和溢出隐藏（overflow: hidden），以确保内容不会超出容器范围。

2. 列表项设置：

   • .wgBanner 是一个无序列表（<ul>），它包含了所有的轮播项（<li>）。
   • 列表项（.wgBanner-box）被设置为绝对定位（position: absolute），这样它们可以堆叠在一起。
   • 初始时，所有的列表项都被设置为不透明（opacity: 0），并且有一个平滑的过渡效果（transition: all 0.5s），这使得它们在切换时能够平滑地淡入淡出。

3. 激活状态设置：

   • .wgBanner-box.first_active 是一个特殊的类，它被用来标识当前显示的轮播项。
   • 这个类设置了更高的z-index值（z-index: 3），以确保它在堆叠顺序中位于最前面。
   • 同时，它的不透明度被设置为1（opacity: 1），使其完全可见。

关键部分css示例：

  

.wgBanner-box {

    /* 设置图片叠在一起 先忽略*/

    position: absolute;

    opacity: 0;

    transition: all 0.5s;

}

  

.wgBanner-box.first_active {

    z-index:3;

    opacity: 1;

}

js控制轮播图动作

轮播图内点击圆点等的相关动作，比如当你点击轮播图下面的小圆点时，轮播图会根据当前的状态（显示或隐藏）来切换显示或隐藏。这个时候就可以通过一种获取dom的方式来让当前节点实现样式的显示于隐藏

// 轮播图内点击圆点

    var and = document.getElementById("and");

    var feedback = document.getElementById("feedback");

    and.onclick = function() {

        if (feedback.style.display=='none'){

            feedback.style.display = 'block';

        }

        else{

            feedback.style.display = 'none';

        }

        return false;

    }

定义

先获取得到每一个节点

  

    var items = document.getElementsByClassName('wgBanner-box');

    var points = document.getElementsByClassName('wgBanner-menu_ul_li');

    var index = 0;

清除激活状态

这个函数用于清除所有轮播图项目和导航点的激活状态。

    var clearActive = function(){

        for(var i = 0; i < items.length; i++){

            items[i].className = 'wgBanner-box';

        }

        for(var i = 0; i < items.length; i++){

            points[i].className = 'wgBanner-menu_ul_li';

        }

    }

切换项目

这个函数用于将轮播图切换到某一个index下标的项目或者是下一个项目，并在到达最后一个项目时循环回第一个项目。

    var goIndex = function(){

        clearActive();

        items[index].className = 'wgBanner-box first_active';

        points[index].className = 'wgBanner-menu_ul_li active';

    }

  

    var goNext = function(){

        if(index<7){

            index++;

        }

        else{

            index=0;

        }

        goIndex();

    }

  

定义监听

我们需要为每个导航点添加了鼠标进入和离开事件的监听器。当鼠标进入导航点时，它会切换到对应的轮播图项目，并清除定时器。当鼠标离开导航点时，它会再次切换到对应的轮播图项目。

    for (var i = 0; i < points.length; i++){

        points[i].addEventListener('mouseenter',function(){

            var pointIndex = this.getAttribute('data-index');

            index = pointIndex;

            goIndex();

  

            clearInterval(time);

            time = null;

        })

        points[i].addEventListener('mouseleave',function(){

            var pointIndex = this.getAttribute('data-index');

            index = pointIndex;

            goIndex();

        })

    }

实现自动播放

使用 setInterval 函数来实现轮播图的自动播放。每隔 100 毫秒，time 变量加 1。当 time 达到 20 时，它会调用 goNext 函数来切换到下一个项目，并重置 time 变量。

    var time = 0;

  

    setInterval(function() {

        time++;

        if(time == 20){

            goNext();

            time = 0;

        }

    }, 100)

思考

轮播图是一种常见的网页展示方式，它可以自动播放图片或内容，也可以通过用户的交互来手动切换。这段代码实现了一个基本的轮播图功能，包括自动播放和手动导航。通过goIndex和goNext函数，我们可以切换到指定索引的轮播图项目，并且在切换时更新对应的导航点状态。鼠标进入和离开导航点时，会切换到对应的轮播图项目，并且清除或重置定时器，实现了手动导航的功能。

代码结构上，分为多个函数和事件监听部分，易于理解和维护。使用了setInterval实现自动播放，clearInterval清除定时器，addEventListener添加事件监听器，这些都是JavaScript中常用的API。通过合理的命名和注释，代码的可读性和可维护性得到了提升。

用到的DOM操作、事件监听、定时器的使用等技术。这些技术在实际开发中非常有用，可以实现各种交互效果和动态功能。例如，通过DOM操作，我们可以动态地改变网页的内容和样式；通过事件监听，我们可以响应用户的操作；通过定时器，我们可以实现自动播放和定时任务等。