JavaScript 原生js写的一个非常简单的轮播图

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

JavaScript 原生js写的一个非常简单的轮播图

初学 JavaScript ，用原生js写的一个非常简单的轮播图

核心的思想是，通过设置图片的透明或不透明，从而达到图片出现或消失的效果

实现的方法

将所有的轮播图片通过绝对定位重叠在一起
将所有图片设为透明
设置一个类名 appear ，具有这个类的元素设置为不透明，即显示
通过 JavaScript 控制 appear 类名的添加和移除，从而控制图片的出现和消失
小圆点的透明度变化方法同上
在图片元素上加入过渡属性，加长变化的时间，可以达到淡入淡出的效果

实现的效果

图片淡入淡出
左右轮播，循环轮播，小圆点点击切换到相应图片
自动轮播，可以控制轮播的时间间隔
鼠标离开图片时，自动轮播开始
鼠标移至图片时，自动轮播暂停

完整的代码

文件的结构

文件的目录

完整代码如下

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        #slideshow {
            width: 100vw;
            height: 95vh;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
        }

        #imglist li {
            width: 100%;
            height: 100%;
            position: absolute;

            /* 全部图片设为透明 */
            opacity: 0;
            transition: opacity 3.5s;
        }

        #imglist>li img {
            width: 100%;
            height: 100%;
        }

        #dotlist {
            position: absolute;
            bottom: 30px;
            width: 100px;
            display: flex;
            justify-content: space-between;
            left: 50%;
            transform: translate(-50%);
        }

        #dotlist>li {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #fff;

            /* 全部小圆点设为半透明 */
            opacity: 0.3;
            cursor: pointer;
            user-select: none;
        }

        /* 具有appear类的元素设为 不透明 即显示 */
        #imglist>li.appear,
        #dotlist>li.appear {
            opacity: 1;
        }

        /* 左右轮播按钮 */
        #pre,
        #next {
            position: absolute;
            font-size: 100px;
            color: rgba(0, 0, 0, .3);
            top: 50%;
            transform: translate(0, -50%);
            font-weight: bold;
            cursor: pointer;
            user-select: none;
        }

        #pre {
            left: 20px;
        }

        #next {
            right: 20px;
        }

        #pre:hover,
        #next:hover {
            color: rgba(255, 255, 255, .3);
        }
    </style>
</head>

<body>

    <div id="slideshow">
        <ul id="imglist">
            <li><img src="images/佩恩.jpg"></li>
            <li><img src="images/小南.jpg"></li>
            <li><img src="images/波风水门.jpg"></li>
            <li><img src="images/旗木卡卡西.jpg"></li>
            <li><img src="images/自来也.jpg"></li>
        </ul>
        <ul id="dotlist">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div id="pre">&lt;</div>
        <div id="next">&gt;</div>
    </div>
    <script>
        // 找对象
        var slideShow = document.getElementById("slideshow");
        var imgList = document.getElementById("imglist");
        var imgs = imgList.children;
        var dotList = document.getElementById("dotlist");
        var dots = dotlist.children;
        var pre = document.getElementById("pre");
        var next = document.getElementById("next");
        var duration = 3000; // 设置轮播时间间隔
        var Index = 0;
        var count = imglist.children.length; // 获取图片数量
        var timer; // 设置一个计时器

        window.onload = function () {
            imgList.children[0].classList.add("appear"); // 初始时显示第一幅图片
            dotList.children[0].classList.add("appear"); // 初始时第一个点为白色

            //为每个点添加单击处理函数
            for (var i = 0; i < dots.length; i++) {
                dots[i].index = i;
                dots[i].onclick = changeMe;
            }

            //启动动画自动播放
            timer = setInterval(rotate, duration);

            // 鼠标移到图片上面时，停止动画
            slideShow.onmouseover = function (event) {
                clearInterval(timer);
            };

            // 鼠标离开图片上面时，启动动画
            slideShow.onmouseout = function (event) {
                timer = setInterval(rotate, duration);
            };

            //左右播放图片
            pre.onclick = preImg;
            next.onclick = nextImg;
        }

        //改变图片和点的当前状态（通过 添加 或 移除 appear 属性）
        function change() {
            for (var i = 0; i < dots.length; i++) {
                dots[i].classList.remove("appear");
                imgs[i].classList.remove("appear");
            }
            dots[Index].classList.add("appear");
            imgs[Index].classList.add("appear");
        }

        //循环切换图片
        function rotate() {
            Index++;
            if (Index == count) {
                Index = 0;
            }
            change();
        }

        //切换上一幅图片
        function preImg() {
            Index--;
            if (Index < 0) {
                Index = count - 1;
            }
            change();
        }

        //切换下一幅图片
        function nextImg() {
            Index++;
            if (Index == count) {
                Index = 0;
            }
            change();
        }

        //单击某个圆点，切换到相应图片
        function changeMe() {
            Index = this.index;
            change();
        }
    </script>
</body>

</html>