原生js实现渐出渐入式（呼吸式）轮播图【含完整代码】

最新推荐文章于 2024-01-20 09:05:19 发布

林二禾

最新推荐文章于 2024-01-20 09:05:19 发布

阅读量1.0k

点赞数 3

分类专栏： Javascript实现网站常见动画文章标签： javascript css

本文链接：https://blog.csdn.net/qq_40261601/article/details/129124412

版权

Javascript实现网站常见动画专栏收录该内容

7 篇文章

订阅专栏

该文章展示了如何使用HTML、CSS和JavaScript实现一个具有自动循环播放、鼠标悬停暂停、点击按钮切换图片以及平滑过渡效果的轮播图。代码中利用了CSS的绝对定位和透明度变化，结合JavaScript控制图片的切换和过渡状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

1、自动循环播放下一张
2、鼠标悬停，移出继续播放
3、鼠标点击向右按钮，跳到下一张
4、鼠标点击向左按钮，跳到上一张
5、保证图片的过渡效果完整呈现后，才能跳到下一张

在这里插入图片描述

实现思路：

1、图片列表使用绝对定位，堆叠在相同位置
2、只有第一张透明度opacity为1，其他为0
3、定义变量currentPosition，记录当前图片是第几张，默认为0第一张
4、获取li列表项数组，切换时 liArr[currentPosition] 透明度变0，liArr[currentPosition+1] 透明度变1

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼吸轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 标题*/
        h1 {
            text-align: center; /*居中显示*/
        }
        .carousel {
            width: 650px;
            height: 360px;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;
        }
        .carousel ul {
            /* 消除列表默认样式 */
            list-style: none;  
        }
        .carousel #list img {
            width: 650px;
        }
        .carousel #list li {
            /* 所有图片都使用绝对定位，层叠在同一位置 */
            position: absolute;
            top: 0;
            left: 0;
            /* 透明度都是0 */
            opacity: 0;
            /* 透明效果过渡 */
            transition: opacity 1s ease 0s;
        }
        /* 只有第一张透明度是1 */
        .carousel #list li:first-child {
            opacity: 1;
        }
        /* 上一张/下一张控制按钮 */
        .carousel>a {
            position: absolute;
            width: 30px;
            height: 50px;
            /* 垂直居中，距顶部一半的父元素盒子宽度，再向上移动自身的一半 */
            top: 50%;
            margin-top: -25px;
            background-color: rgba(163, 166, 167, 0.5);
        }
        .carousel>a>img {
            margin-left: -8px;
        }
        .carousel .leftbtn {
            left: 20px;
        }
        .carousel .rightbtn {
            right: 20px;
        }
        /* 底部定位圆点list */
        .carousel #location_list {
            width: 120px;
            position: absolute;
            top: 350px;
            left: 270px;
        }
        .carousel #location_list li {
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 5px;
            border: 1px solid white;
        }
        /* 圆点被激活时的样式，动态为圆点增加class */
        .carousel #location_list li.active {
            background-color: bisque;
        }
    </style>
</head>
<body>
    <h1>渐出渐入式轮播图</h1>
    <div class="carousel">
         <!--图片列表  -->
        <ul id="list">
            <li><img src="images/number/1.jpg" alt="" /></li>
            <li><img src="images/number/2.jpg" alt="" /></li>
            <li><img src="images/number/3.jpg" alt="" /></li>
            <li><img src="images/number/4.jpg" alt="" /></li>
            <li><img src="images/number/5.jpg" alt="" /></li>
        </ul>
         <!-- 左右按钮 -->
        <a href="javascript:;" class="leftbtn" ><img src="./images/lunbo/chevron-left.png" alt="" srcset=""></a>
        <a href="javascript:;" class="rightbtn"><img src="./images/lunbo/chevron-right.png" alt="" srcset=""></a>
        <!-- 圆点列表 -->
        <ul id="location_list">
            <!-- 默认激活第一个 -->
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var carousel = document.querySelector(".carousel");
        // 获取图片列表ul
        var olist = document.getElementById("list");
        var liArr = document.querySelectorAll("#list li");
    
        // 获取定位数组
        var location_list = document.querySelectorAll('#location_list>li');

        // 向左按钮
        var leftbtn = document.querySelector('.leftbtn');
        // 向右按钮
        var rightbtn = document.querySelector('.rightbtn');
        // 当前图片定位
        var currentPosition = 0;

        // 定义全局定时器
        var timer = null;
        // 使用islock变量，保证过渡效果完成后再执行获取下一张的动作
        var islock = false;

        function move(){
            // 定义一个定时器，每隔2s模拟点击右键的动作
            timer = setInterval(function(){
                rightbtn.click();
            },2000);
        }
        // 页面加载后自动执行move函数
        move();

        // 鼠标移入，清除定时器
        carousel.onmouseenter = function(){
            clearInterval(timer);
        }
         // 鼠标移出，调用自动播放
        carousel.onmouseleave = function(){
            move();
        }

        // 下一张
        rightbtn.onclick = function(){
            // 如果当前过渡效果还未执行完，先不执行获取下一张的动作
            if(islock){return;}
            // 上锁，保证过渡效果完成
            islock = true;
            // 设置当前图片透明度为 0，透明
            liArr[currentPosition].style.opacity = 0;
            location_list[currentPosition].className = "none";
            if(currentPosition == 4){
                currentPosition = -1;
            }
            // 设置下一张透明度为 1，不透明
            liArr[currentPosition+1].style.opacity = 1;
            location_list[currentPosition+1].className = "active";
            currentPosition++;
            // 1s的过渡效果完成后，解锁，可以执行获取下一张的动作
            setTimeout(function(){
                islock = false;
            },1000)
        };

        // 上一张
        leftbtn.onclick = function(){
            if(islock){return;}
            islock = true;
            liArr[currentPosition].style.opacity = 0;
            location_list[currentPosition].className = "none";
            if(currentPosition == 0){
                currentPosition = 5;
            }
            // 设置上一张透明度为 1，不透明
            liArr[currentPosition-1].style.opacity = 1;
            location_list[currentPosition-1].className = "active";
            currentPosition--;

            setTimeout(function(){
                islock = false;
            },1000)
        };

    </script>
</body>
</html>