图片轮播组件

发布时间：2024年01月18日
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
        }
        
        .image-slider {
            width: 100vw;
            height: 100vh;
        }
        
        .image-slider .slide {
            width: 100%;
            height: 100%;
            position: absolute;
            transition: all linear 0.8s;
            overflow: hidden;
        }
        
        .image-slider .image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            z-index: 50;
        }
        
        .image-slider .slide .content {
            position: absolute;
            z-index: 100;
            color: white;
            background-color: rgba(0, 0, 0, 0.6);
            padding: 48px;
            bottom: 0;
            width: 50%;
        }
        
        .image-slider .slide .content h1 {
            margin-bottom: 24px;
        }
        
        #prev,
        #next {
            position: absolute;
            z-index: 150;
            width: 80px;
            height: 80px;
            font-size: 48px;
            color: white;
            text-align: center;
            line-height: 80px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            top: calc(50% - 24px);
            left: 50px;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        #next {
            left: unset;
            right: 50px;
        }
        
        .image-slider .slide {
            opacity: 0;
        }
        
        .image-slider .slide.current {
            opacity: 1;
        }
        
        .image-slider .slide .content {
            opacity: 0;
            transform: translateY(500px);
        }
        
        .image-slider .slide.current .content {
            opacity: 1;
            transform: translateY(0);
            transition: all ls ease-in-out 0.4s;
        }
        
        #prev:hover,
        #next:hover {
            background-color: rgba(255, 255, 255, 0.6);
            color: black;
        }
        
        @media screen and (max-width:960px) {
            .image-slider .slide .content {
                width: 100%;
            }
            #prev,
            #next {
                font-size: 24px;
                left: 24px;
                width: 48px;
                height: 48px;
                line-height: 48px;
                top: 40%;
            }
            #next {
                left: unset;
                right: 24px;
            }
        }
    </style>
</head>

<body>
    <header>
        <div class="image-slider">
            <div class="slide current">
                <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.g4s6qKV59Lvgz_1yyxc8CgHaEd?w=315&h=190&c=7&r=0&o=5&dpr=1.3&pid=1.7" class="image" alt="">
                <div class="content">
                    <h1 class="title">北京</h1>
                    <div class="description">北京市（Beijing），简称“京”，古称燕京、北平，是中华人民共和国首都、直辖市、国家中心城市、超大城市， [185]国务院批复确定的中国政治中心、文化中心、国际交往中心、科技创新中心， [1]中国历史文化名城和古都之一，世界一线城市。 [3] [142] [189]截至2023年10月，北京市下辖16个区，总面积16410.54平方千米。 [82] [195] [197]2022年末，北京市常住人口2184.3万人。</div>
                </div>
            </div>
            <div class="slide  ">
                <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.mq-6WL2jvXbCpe1ISe0D5wHaE8?w=261&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" class="image" alt="">
                <div class="content">
                    <h1 class="title">武汉</h1>
                    <div class="description">武汉市，简称“汉”，别称江城，湖北省辖地级市、省会，副省级市、国家中心城市、超大城市 [200]，国务院批复确定的中国中部地区的中心城市，全国重要的工业基地、科教基地和综合交通枢纽 [1]，中国人民解放军联勤保障部队机关驻地 [207]。全市下辖13个区，总面积8569.15平方千米。截至2022年末，常住人口1373.90万人，地区生产总值18866.43亿元 </div>
                </div>
            </div>
            <div class="slide  ">
                <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.l1RbUCqk1BKmLzRIy1v26gHaEo?w=285&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" class="image" alt="">
                <div class="content">
                    <h1 class="title">上海</h1>
                    <div class="description">上海市，别称沪、申 [218]，是中华人民共和国直辖市、中国共产党诞生地、国家中心城市、超大城市 [209]、上海大都市圈核心城市、中国历史文化名城、世界一线城市。 [229]上海市基本建成国际经济、金融、贸易、航运中心，形成具有全球影响力的科技创新中心基本框架。 [1] [211] [219]上海市总面积6340.5平方千米。 [4] [179]截至2022年，上海市常住人口为2475.89万人。 [187]截至2023年10月，上海市下辖16个区，市人民政府驻上海市黄浦区人民大道200号。</div>
                </div>
            </div>
            <div id="prev">
                <i class="fas fa-chevron-left"></i>
            </div>
            <div id="next">
                <i class="fas fa-chevron-right"></i>
            </div>
        </div>
    </header>
    <script>
        //后退按钮
        const prev = document.querySelector("#prev");
        //前进按钮
        const next = document.querySelector("#next");

        // 所有幻灯片
        const slides = document.querySelectorAll(".slide");

        // 当前正在播放的幻灯片
        var currentIndex = 0;

        // 是否自动播放
        var autoPlay = true;

        // 播放方向，前进或后退
        var forward = false;

        // 自动播放间隔，5秒
        var interval = 5000;

        // 添加前进按钮事件处理函数
        next.addEventListener("click", handleNextClicked);

        // 添加后退按钮事件处理函数
        prev.addEventListener("click", handlePrevClicked);

        // 是否自动播放
        if (autoPlay) {
            setInterval(forward ? handleNextClicked : handlePrevClicked, interval);
        }

        function handleNextClicked() {
            //当前幻灯片
            let current = slides[currentIndex];
            // 去掉当前幻灯片的current属性
            current.classList.remove("current");

            //移动到下一张幻灯片，如果没有，则从第一张开始
            currentIndex++;
            if (currentIndex >= slides.length) {
                currentIndex = 0;
            }
            // 给下一张幻灯片加上current class
            slides[currentIndex].classList.add("current");
        }

        function handlePrevClicked() {
            //当前幻灯片
            let current = slides[currentIndex];
            // 去掉当前幻灯片的current属性
            current.classList.remove("current");

            //移动到上一张幻灯片，如果没有，则从最后一张开始
            currentIndex--;
            if (currentIndex < 0) {
                currentIndex = slides.length - 1;
            }
            // 给下一张幻灯片加上current class
            slides[currentIndex].classList.add("current");
        }
    </script>
</body>

</html>

效果图：
在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_45932157/article/details/135682748
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章