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

r囧r小猫 2023-06-01 12:57 44阅读 0赞

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

*  JavaScript 原生js写的一个非常简单的轮播图
 *   *  实现的方法
     *  实现的效果
     *  完整的代码

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

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

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

## 实现的方法 ##

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

## 实现的效果 ##

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

## 完整的代码 ##

文件的结构

![文件的目录][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70]

完整代码如下

<!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"><</div>
            <div id="next">></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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhcHB5YWlsZWFm_size_16_color_FFFFFF_t_70]: /images/20230601/25cca906be1247a9811ca3bac4ae0061.png