js第十二题 - 技术栈

题十二：轮播图

要求：

1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；

2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；

3.点击左右箭头可以进行左右图片的切换；

4.图片上需有介绍的文字，会随图片切换一起进行切换。

html

html 复制代码

<body>
    <div class="carousel">
        <div class="slides">
            <div class="slide active">
                <img src="./static/QQ20250120-095415.png" alt="项目1">
            </div>
            <div class="slide">
                <img src="./js答辩/static/4034970a304e251f49011866b586c9177e3e53be - 副本.png" alt="项目2">
            </div>
            <div class="slide">
                <img src="./js答辩/static/2025-new-year-message-cn.jpg" alt="项目3">
            
            </div>
        </div>

        <div class="controls">
            <div class="arrow prev">❮</div>
            <div class="arrow next">❯</div>
        </div>

        <div class="dots"></div>
    </div>

css

css 复制代码


  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .carousel {
            position: relative;
            width: 1000px;
            height: 500px;
            margin: 50px auto;
            overflow: hidden;
        }

        .slides {
            position: relative;
            height: 100%;
        }

        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .slide.active {
            opacity: 1;
        }

        .slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


        .controls {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .carousel:hover .controls {
            opacity: 1;
        }

        .arrow {
            cursor: pointer;
            font-size: 40px;
            color: white;
        }

        .dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .dot {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background 0.3s;
        }

        .dot.active {
            background: white;
        }

javascript 复制代码

   const carousel = document.querySelector('.carousel');
        const slides = document.querySelectorAll('.slide');
        const dotsContainer = document.querySelector('.dots');
        const prevBtn = document.querySelector('.prev');
        const nextBtn = document.querySelector('.next');
        
        // 初始化小圆点
        slides.forEach((_, index) => {
            const dot = document.createElement('div');
            dot.classList.add('dot');
            if (index === 0) dot.classList.add('active');
            dot.addEventListener('click', () => goToSlide(index));
            dotsContainer.appendChild(dot);
        });

        const dots = document.querySelectorAll('.dot');
        let currentIndex = 0;
        let autoPlayTimer;

        // 自动播放
        function startAutoPlay() {
            autoPlayTimer = setInterval(() => {
                nextSlide();
            }, 3000);
        }

        // 切换幻灯片
        function goToSlide(index) {
            slides[currentIndex].classList.remove('active');
            dots[currentIndex].classList.remove('active');
            
            currentIndex = (index + slides.length) % slides.length;
            
            slides[currentIndex].classList.add('active');
            dots[currentIndex].classList.add('active');
        }

        function nextSlide() {
            goToSlide(currentIndex + 1);
        }

        function prevSlide() {
            goToSlide(currentIndex - 1);
        }

        // 事件监听
        prevBtn.addEventListener('click', prevSlide);
        nextBtn.addEventListener('click', nextSlide);

        // 鼠标交互
        carousel.addEventListener('mouseenter', () => {
            clearInterval(autoPlayTimer);
        });

        carousel.addEventListener('mouseleave', startAutoPlay);

        // 初始化自动播放
        startAutoPlay();