HTML轮播图

html

<div class="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="../../assets/ci-ui/c-images/zq-img/cimg-status2-zwnr.png" alt="">
        </div>
        <div class="carousel-item">
            <img src="../../assets/ci-ui/c-images/zq-img/no-data.png" alt="">
        </div>
        <div class="carousel-item">
            <img src="../../assets/ci-ui/c-images/zq-img/tipos-icn.png" alt="">
        </div>
    </div>
    <input class="hide" value="0" id="invoice_preview_current_index">
    <button class="carousel-control left" onclick="prevSlide()">❮</button>
    <button class="carousel-control right" onclick="nextSlide()">❯</button>
</div>

js

// 展示需要展示的图片
function showSlide(index) {
    const items = document.querySelectorAll('.carousel-item');
    const totalItems = items.length;
    let currentIndex;
    // 获取下一个展示的图片
    // 确保索引在范围内
    if (index >= totalItems) {
        currentIndex = 0;
    } else if (index < 0) {
        currentIndex = totalItems - 1;
    } else {
        currentIndex = index;
    }
    // 更新当前值
    $('#invoice_preview_current_index').val(currentIndex);
    // 更新轮播图位置
    const carouselInner = document.querySelector('.carousel-inner');
    carouselInner.style.transform = `translateX(-${currentIndex * 100}%)`;
}

// 上一张
function prevSlide() {
    let currentIndex = parseInt($('#invoice_preview_current_index').val());
    showSlide(currentIndex - 1);
}

// 下一张
function nextSlide() {
    let currentIndex = parseInt($('#invoice_preview_current_index').val());
    showSlide(currentIndex + 1);
}

css

/* 样式设置 */
.carousel {
    position: relative;
    max-width: 90%;
    margin: auto;
    overflow: hidden;
}

.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}

.carousel img {
    width: 100%;
    height: auto;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.carousel-control.left {
    left: 10px;
}

.carousel-control.right {
    right: 10px;
}