h5图片轮播

88岁偷懒被抓

于 2024-07-18 17:16:21 发布

阅读量312

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/newbaby123/article/details/140528068

版权

第一种效果：

第二种效果：

第一种实现，手动点击：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据资产管理平台</title>
    <meta name="format-detection" content="telephone=yes"/>
</head>
<!--引入websit.css文件-->
<link rel="stylesheet" href="./websit.css">
<body>
<header>
</header>
<section>
    <div class="container">
        <div id="gallery">
            <div class="image-container">
                <img src="./assets/city.png" alt="Image 1">
                <div class="img_bottom_title">城市运行类</div>
                <div class="img_bottom_content">
                    燃气管网、供水管线、路灯灯杆、交通路网、公益设施、公共交通、视频监控、充电桩等业务数据
                </div>
            </div>
            <div class="image-container">
                <img src="./assets/root.png" alt="Image 1">
                <div class="img_bottom_title">生产制造类</div>
                <div class="img_bottom_content">
                    质量管理、设备运行、能耗管控、物料管理、大宗商品采购、物流管理等环节数据
                </div>
            </div>
            <div class="image-container">
                <img src="./assets/earth.png" alt="Image 1">
                <div class="img_bottom_title">技术服务类</div>
                <div class="img_bottom_content">
                    客户分析、业务运营、产研结果、设计工艺、市场分析、物联与传感设备采集等数据
                </div>
            </div>
            <div class="image-container">
                <img src="./assets/person.png" alt="Image 1">
                <div class="img_bottom_title">其他</div>
                <div class="img_bottom_content">
                    细分业务领域还有很多数据可作为资产，可以帮您判断一下
                </div>
                <div class="bananer-bottom-toOtner" onclick="toFormItem()">在线数据诊断></div>
            </div>
            <div class="left_right_btn" id="prev" onclick="prevImage()">
                <img src="./assets/left1.png" alt="Prev">
            </div>
            <div class="left_right_btn" id="next" onclick="nextImage()">
                <img src="./assets/right1.png" alt="Next">
            </div>
        </div>
    </div>
</section>
<script type="text/javascript">
    var currentIndex = 0;
    var gallery = document.querySelector('#gallery');
    var imageContainer = document.querySelectorAll('.image-container');
    imageContainer[0].classList.add('active');

    function goGalleryIndex(index) {
        for (var i = 0; i < imageContainer.length; i++) {
            imageContainer[i].style.opacity = 0;
            imageContainer[i].classList.remove('active');
        }

        imageContainer[index].classList.add('active');
        imageContainer[index].style.opacity = 1;
    }

    function nextImage() {
        if (currentIndex < imageContainer.length - 1) {
            currentIndex++;
        } else {
            currentIndex = 0;
        }
        goGalleryIndex(currentIndex);
    }

    function prevImage() {
        if (currentIndex > 0) {
            currentIndex--;
        } else {
            currentIndex = imageContainer.length - 1;
        }
        goGalleryIndex(currentIndex);
    }
</script>
</body>
</html>

css：

#gallery {
    position: absolute;
    width: 100%;
    height: 100px;
    text-align: center;
    top: 157%;
}

.image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 1.5s ease;
    align-items: center;
}

.image-container.active {
    opacity: 1;
}

.img_bottom_title {
    font-size: 18px;
    font-weight: 500;
    margin-top: 4px;
    line-height: 24px;
    letter-spacing: 0em;
    color: #2E51DE;
}

.img_bottom_content {
    width: 75%;
    font-size: 15px;
    margin-top: 10px;
    font-weight: normal;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0em;
    color: #3D3D3D;
}
.left_right_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

第二种方法，自动轮播加滚动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据资产管理平台</title>
    <meta name="format-detection" content="telephone=yes"/>
</head>
<!--引入websit.css文件-->
<link rel="stylesheet" href="./websit.css">
<body>
<header>
</header>
<section>
    <div class="container">
        <!--        优势-->
        <div class="carousel">
            <div class="carousel-item">
                <img src="./assets/dz.png" class="img-dz" alt="轮播图"/>
                <img src="./assets/ffdal.png" class="img-ffdal" alt="轮播图"/>
                <img src="./assets/zyddw.png" class="img-zyddw" alt="轮播图"/>
                <img src="./assets/wsdst.png" class="img-wsdst" alt="轮播图"/>
                <img src="./assets/sjjzh.png" class="img-sjjzh" alt="轮播图"/>
                <img src="./assets/gjfn.png" class="img-gjfn" alt="轮播图"/>
            </div>
            <div class="carousel-item">
                <img src="./assets/ffdal1.png" alt="轮播图"/>
                <div class="banner-bottom">
                    <div class="banner-bottom-title">丰富的案例</div>
                    <div class="banner-bottom-content">在济南、德州、临沂、菏泽等地有数十个成熟实践案例。</div>
                </div>
                <img src="./assets/bottom.png" class="banner_bottom_image_b" alt="轮播图"/>
            </div>
            <div class="carousel-item">
                <img src="./assets/zyddw1.png" alt="轮播图"/>
                <div class="banner-bottom">
                    <div class="banner-bottom-title">专业的队伍</div>
                    <div class="banner-bottom-content">
                        拥有数据业务专家、架构师、数据工程师、开发工程师、数据分析师、数据资产管理师等专业技术人才。
                    </div>
                </div>
                <img src="./assets/bottom.png" class="banner_bottom_image_b" alt="轮播图"/>
            </div>
            <div class="carousel-item">
                <img src="./assets/wsdst1.png" alt="轮播图"/>
                <div class="banner-bottom">
                    <div class="banner-bottom-title">完善的生态</div>
                    <div class="banner-bottom-content">
                        与国内会计师事务所、律师事务所、资产评估机构、数据交易平台等数十个个机构企业建立生态合作。
                    </div>
                </div>
                <img src="./assets/bottom.png" class="banner_bottom_image_b" alt="轮播图"/>
            </div>
            <div class="carousel-item">
                <img src="./assets/gjfn1.png" alt="轮播图"/>
                <div class="banner-bottom">
                    <div class="banner-bottom-title">工具赋能</div>
                    <div class="banner-bottom-content">
                        利用“企业数据资产管家”工具，让入表服务实施更透明、规范、高效。
                    </div>
                </div>
                <img src="./assets/bottom.png" class="banner_bottom_image_b" alt="轮播图"/>
            </div>
            <div class="carousel-item">
                <img src="./assets/sjjzh1.png" alt="轮播图"/>
                <div class="banner-bottom">
                    <div class="banner-bottom-title">数据价值化</div>
                    <div class="banner-bottom-content">
                        汇聚行业数据资产、数据产品、数据资源信息，具有跨行业数据场景构建及撮合能力。
                    </div>
                </div>
                <img src="./assets/bottom.png" class="banner_bottom_image_b" alt="轮播图"/>
            </div>
            <div class="five_point">
                <!--                五个点-->
                <div class="black-dot" id="point0"></div>
                <div class="black-dot" id="point1"></div>
                <div class="black-dot" id="point2"></div>
                <div class="black-dot" id="point3"></div>
                <div class="black-dot" id="point4"></div>
                <div class="black-dot" id="point5"></div>
            </div>
        </div>
       
    </div>
</section>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var carousel = document.querySelector('.carousel');
        var items = document.querySelectorAll('.carousel-item');
        var activeIndex = 0;

        function goToIndex(index) {
            for (var i = 0; i < items.length; i++) {
                items[i].style.opacity = 0;
                items[i].classList.remove('active');
            }

            items[index].classList.add('active');
            items[index].style.opacity = 1;
        }

        function setNav(index) {
            for (var i = 0; i < items.length; i++) {
                var pointBotOther = carousel.querySelector(`#point${i}`); //图片区域
                pointBotOther.style.background = `#D8D8D8`;
            }

            var pointBot = carousel.querySelector(`#point${index}`); //图片区域
            pointBot.style.background = `black`;
        }

        //自动轮播
        var timer = setInterval(() => {
            nextItem();
        }, 4000);

        function nextItem() {
            if (activeIndex < items.length - 1) {
                activeIndex++;
            } else {
                activeIndex = 0;
            }
            goToIndex(activeIndex);
            setNav(activeIndex)
        }

        function previousItem() {
            if (activeIndex > 0) {
                activeIndex--;
            } else {
                activeIndex = items.length - 1;
            }
            goToIndex(activeIndex);
            setNav(activeIndex)
        }

        // 初始化显示第一张图片
        goToIndex(activeIndex);
        // 滑动切换逻辑（可选）
        let startX, endX;
        carousel.addEventListener('touchstart', function (e) {
            startX = e.touches[0].clientX;
        });

        carousel.addEventListener('touchend', function (e) {
            endX = e.changedTouches[0].clientX;
            if (endX - startX > 0) {
                previousItem();
            } else {
                nextItem();
            }
        });
    });
</script>
</body>
</html>

css：

.carousel {
    position: absolute;
    width: 100%;
    top: 269%;
}

.carousel-item {
    width: 100%;
    height: 500px;
    position: absolute;
    opacity: 0;
    display: flex;
    transition: opacity 1.5s ease;
    flex-direction: column;
    justify-content: start;
    align-content: center;
    align-items: center;
}

.carousel-item.active {
    opacity: 1;
}

.drawer-container {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0; /* 初始状态下抽屉是隐藏的 */
    transition: height 0.3s ease; /* 平滑的过渡效果 */
    background-color: white;
    overflow: hidden; /* 防止内容溢出 */
}
.five_point {
    width: 100%;
    display: flex;
    justify-content: center;
    /* margin-top: -153px; */
    top: 297px;
    position: relative;
    z-index: 999;
}

.black-dot {
    width: 5px; /* 点的宽度 */
    height: 5px; /* 点的高度 */
    background-color: #D8D8D8; /* 点的颜色 */
    border-radius: 50%; /* 圆形点的关键点：让div变成圆形 */
    /* 如果需要，可以添加其他样式，比如位置、边框等 */
    margin-top: 12px;
    margin-right: 2px;
    z-index: 999;
}