轮播图代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图示例</title>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body, html {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .slider {
        position: relative;
        width: 650px;
        height: 450px;
        overflow: hidden;
    }
    .slider ul {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .slider li {
        list-style: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s;
    }
    .slider li.active {
        opacity: 1;
    }
    .slider img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .btn-prev, .btn-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        padding: 10px;
        cursor: pointer;
        z-index: 100;
    }
    .btn-prev {
        left: 10px;
    }
    .btn-next {
        right: 10px;
    }
    .dots {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
    }
    .dot {
        width: 10px;
        height: 10px;
        border: 2px solid #fff;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        margin: 0 5px;
        cursor: pointer;
    }
    .dot.active {
        background-color: #fff;
    }
</style>
</head>
<body>
<div class="slider">
    <ul>
        <li class="active"><img src="图片路径/img.png" alt="1"></li>
        <li><img src="图片路径/img.png" alt="2"></li>
        <li><img src="图片路径/img.png" alt="3"></li>
        <li><img src="图片路径/img.png" alt="4"></li>
        <li><img src="图片路径/img.png" alt="5"></li>
    </ul>
    <button class="btn-prev">&#10094;</button>
    <button class="btn-next">&#10095;</button>
    <div class="dots"></div>
</div>

<script>
    const slider = document.querySelector('.slider');
    const slides = document.querySelectorAll('.slider li');
    const dotsContainer = document.querySelector('.dots');
    const btnNext = document.querySelector('.btn-next');
    const btnPrev = document.querySelector('.btn-prev');
    let currentIndex = 0;
    let sliderInterval;

    function createDots() {
        slides.forEach((_, index) => {
            const dot = document.createElement('div');
            dot.classList.add('dot');
            dot.addEventListener('click', () => goToSlide(index));
            dotsContainer.appendChild(dot);
        });
        dotsContainer.children[0].classList.add('active');
    }

    function updateDots() {
        document.querySelectorAll('.dot').forEach((dot, index) => {
            dot.classList.toggle('active', index === currentIndex);
        });
    }

    function goToSlide(index) {
        slides.forEach(slide => {
            slide.classList.remove('active');
        });
        slides[index].classList.add('active');
        currentIndex = index;
        updateDots();
    }

    function nextSlide() {
        currentIndex = (currentIndex + 1) % slides.length;
        goToSlide(currentIndex);
    }

    function prevSlide() {
        currentIndex = (currentIndex - 1 + slides.length) % slides.length;
        goToSlide(currentIndex);
    }

    function startSlider() {
        sliderInterval = setInterval(nextSlide, 3000);
    }

    function stopSlider() {
        clearInterval(sliderInterval);
    }

    btnNext.addEventListener('click', nextSlide);
    btnPrev.addEventListener('click', prevSlide);
    slider.addEventListener('mouseover', stopSlider);
    slider.addEventListener('mouseout', startSlider);

    // 初始化
    createDots();
    startSlider();
</script>
</body>
</html>
轮播图示例