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>

来源：CSDN

作者：VIP一米阳光

链接：https://blog.csdn.net/Happyaileaf/article/details/102007727

标签

js代码

轮播

slideshow