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;
        }

​

js

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();
相关推荐
勇敢di牛牛3 分钟前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
詩句☾⋆᭄南笙13 分钟前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单
IT_陈寒25 分钟前
Python性能翻倍的5个冷门技巧:从GIL逃逸到内存视图的实战优化指南
前端·人工智能·后端
_extraordinary_26 分钟前
Java Spring配置
java·开发语言·spring
南城巷陌30 分钟前
错误边界:用componentDidCatch筑起React崩溃防火墙
前端·react.js·前端框架
FinClip35 分钟前
OpenAI推出Apps SDK,你的企业App跟上了吗?
前端·app·openai
馨谙41 分钟前
Linux中的管道与重定向:深入理解两者的本质区别
前端·chrome
进击的大海贼1 小时前
QT-C++ 自定义加工统计通用模块
开发语言·c++·qt
Rhys..1 小时前
JS - npm init
开发语言·javascript·npm
夏天想1 小时前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm