自动切换轮播图

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="./static/libs/scrollReveal/scrollreveal.min.js"></script>
    <!-- 引入font-awesome依赖 -->
    <link
            href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css"
            rel="stylesheet"
    />
    <link rel="stylesheet" href="./static/libs/glide/glide.core.min.css"/>
    <link rel="stylesheet" href="./static/libs/glide/glide.theme.min.css"/>
    <link rel="stylesheet" href="./css/common.css"/>
    <link rel="stylesheet" href="./css/test.css">
    <title></title>
</head>
<body>
<!-- 网页头部 -->
<header>
    <div class="logo">上</div>
    <nav>
        <a href="index.html">首页</a>
        <a href="service.html">解决方案</a>
        <a href="company-activities.html">新闻资讯</a>
        <a href="product.html" style="color:#2E69D8;">产品中心</a>
        <a href="sample-apply.html">样品申请</a>
        <a href="about.html">关于我们</a>
        <a href="join.html">加入我们</a>
        <a href="online-store.html">线上商城</a>
        <!-- 语言切换链接 -->
        <a href="#" class="language-switch"><i class="fas fa-globe"></i></a>
        <a href="#"><i class="fas fa-search"></i></a>
    </nav>
    <div class="burger">
        <div class="burger-line1"></div>
        <div class="burger-line2"></div>
        <div class="burger-line3"></div>
    </div>
</header>

<div class="view-contents">
    <div class="page-banner">
        <img src="./static/images/product/product_banner.png" alt="">
    </div>
</div>

<div class="content-wrapper">

    <!--合作供应商-->
    <section id="supplier" class="supplier">
        <h2 class="title1">合作供应商</h2>
        <p class="intro">携手并进，共赢未来，共创辉煌新纪元</p>

        <div class="supplier-wrapper">
            <div class="supplier-list">
                <div class="supplier-item">
                    <img src="https://img.peapix.com/f0aee36def014cd48d978684ba28eaf8_480.jpg" alt="Supplier 1">
                    <p>供应商1</p>
                </div>
                <div class="supplier-item">
                    <img src="https://img.peapix.com/f0aee36def014cd48d978684ba28eaf8_480.jpg" alt="Supplier 2">
                    <p>供应商2</p>
                </div>
                <div class="supplier-item">
                    <img src="https://img.peapix.com/3ad8bb35b0ad492489706d059522814c_480.jpg" alt="Supplier 3">
                    <p>供应商3</p>
                </div>
                <div class="supplier-item">
                    <img src="https://api.ee123.net/img/bingimg/dayimg.jpg?d=20230518" alt="Supplier 4">
                    <p>供应商4</p>
                </div>
                <div class="supplier-item">
                    <img src="https://img.peapix.com/7a426280962e4fe2adcc228a00de3c6b_480.jpg" alt="Supplier 5">
                    <p>供应商5</p>
                </div>
                <div class="supplier-item">
                    <img src="https://img.peapix.com/2b694f04acee4156ac7a13814dad5c2c_480.jpg" alt="Supplier 6">
                    <p>供应商6</p>
                </div>
                <div class="supplier-item">
                    <img src="https://img.peapix.com/d960c06ade5a41e1b0af7218663d6e2b_480.jpg" alt="Supplier 7">
                    <p>供应商7</p>
                </div>
                <div class="supplier-item">
                    <img src="https://img.peapix.com/ff0c3c5e3a3647a9ad6c56964d6919ef_480.jpg" alt="Supplier 8">
                    <p>供应商8</p>
                </div>
            </div>
            <div class="control-buttons">
                <i id="prev" class="fas fa-chevron-left"></i>
                <i id="next" class="fas fa-chevron-right"></i>
            </div>
        </div>




    </section>

</div>

<footer>
    <div class="footer-menus">
        <div class="contact-us">
            <p class="menu-title">联系我们</p>
           
        </div>
        <p class="icp-info"><a href="https://beian.miit.gov.cn">沪ICP备2024082632号-1</a></p>
        <p class="rights">&copy; 2024锐上</p>
        <div class="scroll-to-top">
            <a href="#"><i class="fas fa-chevron-up"></i></a>
        </div>
    </div>
</footer>

<!-- 引入JS文件 -->
<script src="./static/libs/anime/anime.min.js"></script>
<script src="./static/libs/glide/glide.min.js"></script>
<script src="./static/libs/isotope/isotope.pkgd.min.js"></script>
<script src="./static/libs/smooth-scroll/smooth-scroll.polyfills.min.js"></script>
<script src="./js/common.js"></script>
</body>


<script>
    let currentIndex = 0;
    const list = document.querySelector('.supplier-list');
    const items = document.querySelectorAll('.supplier-item');
    let autoSlideInterval;

    function showNext() {
        if (currentIndex < items.length - 1) {
            currentIndex++;
        } else {
            currentIndex = 0;
        }
        list.style.transform = `translateX(-${currentIndex * 100}%)`;
    }

    function showPrev() {
        if (currentIndex > 0) {
            currentIndex--;
        } else {
            currentIndex = items.length - 1;
        }
        list.style.transform = `translateX(-${currentIndex * 100}%)`;
    }

    function startAutoSlide() {
        autoSlideInterval = setInterval(showNext, 3000); // 每3秒自动切换
    }

    function stopAutoSlide() {
        clearInterval(autoSlideInterval);
    }

    document.getElementById('next').addEventListener('click', function() {
        showNext();
        stopAutoSlide();
        startAutoSlide();
    });

    document.getElementById('prev').addEventListener('click', function() {
        showPrev();
        stopAutoSlide();
        startAutoSlide();
    });

    // 启动自动切换
    startAutoSlide();




</script>





</html>

css 复制代码

.content-wrapper {
    /* 一维排版 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

section {
    /* 二维 */
    display: grid;
    /* 每个列的对齐方式 */
    justify-items: center;
    max-width: 1280px;
    padding: 0 80px;
}

.title1 {
    font-size: 34px;
    color: var(--text-color-darker);
}

.title1::after {
    content: "";
    display: block;
    width: 80%;
    height: 4px;
    background-color: var(--primary-color);
    margin-top: 14px;
    transform: translateX(10%);
}

.intro {
    margin: 30px 0 30px 0;
    text-indent: 2em;
    font-size: 18px;
    color: var(--text-color-dark-gray);
}

/* 合作供应商 */
.supplier {
    margin-top: 80px;
}


.supplier-wrapper {
    position: relative;
    width: 80%;
    margin: auto;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.supplier-list {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: 100%;
}

.supplier-item {
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.supplier-item img {
    width: 100%;
    height: auto;
    max-height: 500px;
}

.control-buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    width: 100%;
    pointer-events: none;
}

.control-buttons i {
    pointer-events: auto;
    cursor: pointer;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
}