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();
相关推荐
心愿许得无限大2 分钟前
Qt 常用界面组件
开发语言·c++·qt
2401_8582861113 分钟前
OS15.【Linux】gdb调试器的简单使用
linux·运维·服务器·开发语言·gdb
牛马baby14 分钟前
MATLAB下载安装教程(附安装包)2025最新版(MATLAB R2024b)
开发语言·matlab
山有木兮木有枝_17 分钟前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
shenyan~23 分钟前
关于 c、c#、c++ 三者区别
开发语言·c++
一大树31 分钟前
Vue3 开发必备:20 个实用技巧
前端·vue.js
Ashlee_code34 分钟前
什么是Web3?金融解决方案
开发语言·金融·架构·eclipse·web3·区块链·php
颜渊呐36 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
Evand J1 小时前
【MATLAB例程】AOA与TDOA混合定位例程,适用于三维环境、4个锚点的情况,附下载链接
开发语言·matlab
机器视觉知识推荐、就业指导1 小时前
Qt 与Halcon联合开发八: 结合Qt与Halcon实现海康相机采图显示(附源码)
开发语言·数码相机·qt