HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放

news2024/11/17 9:50:38

一、需求

昨天我们做了轮播图的自动播放，即每隔一秒自动切换一次

今天我们增加两个需求：

1、鼠标点击向右按钮，轮播图往后切换一次；鼠标点击向左按钮，轮播图往前切换一次

2、鼠标悬停在轮播图区域中时，轮播图暂停播放

 

二、代码素材

以下是缺失JS部分的代码，感兴趣的小伙伴可以先自己试着写一写

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图点击切换</title>
    <style>
        * {
            box-sizing: border-box;
        }
 
        .slider {
            width: 560px;
            height: 400px;
            overflow: hidden;
        }
 
        .slider-wrapper {
            width: 100%;
            height: 320px;
        }
 
        .slider-wrapper img {
            width: 100%;
            height: 100%;
            display: block;
        }
 
        .slider-footer {
            height: 80px;
            background-color: rgb(100, 67, 68);
            padding: 12px 12px 0 12px;
            position: relative;
        }
 
        .slider-footer .toggle {
            position: absolute;
            right: 0;
            top: 12px;
            display: flex;
        }
 
        .slider-footer .toggle button {
            margin-right: 12px;
            width: 28px;
            height: 28px;
            appearance: none;
            border: none;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }
 
        .slider-footer .toggle button:hover {
            background: rgba(255, 255, 255, 0.2);
        }
 
        .slider-footer p {
            margin: 0;
            color: #fff;
            font-size: 18px;
            margin-bottom: 10px;
        }
 
        .slider-indicator {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            align-items: center;
        }
 
        .slider-indicator li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }
 
        .slider-indicator li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }
    </style>
</head>
 
<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="./images/slider01.jpg" alt="" />
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了？</p>
            <ul class="slider-indicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev">&lt;</button>
                <button class="next">&gt;</button>
            </div>
        </div>
    </div>
    <script>
        // 1. 初始数据
        const sliderData = [
            { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
            { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
            { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
            { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
            { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
            { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
            { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
            { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
        ]
    </script>
</body>
 
</html>

三、算法思路

1、将代码素材在浏览器中打开，并按F12进入开发者模式，分析各个HTML标签在轮播图中的位置及作用

2、划分业务模块：

        2.1.  模块一：自动播放模块

        2.2.  模块二：手动播放模块

        2.3.  模块三：鼠标悬停暂停播放模块

3、由于三个模块都与轮播图的播放有关，所以我们可以封装一个函数，实现轮播图的渲染

4、手动播放模块：分别为两个按钮添加鼠标点击事件，计数器 i 配合渲染函数实现手动播放下一张与手动播放上一张

 5、自动播放模块：利用间歇函数实现一秒切换一次的功能，间歇函数中调用手动播放下一张模块中的鼠标点击事件实现轮播图的顺序播放

6、鼠标悬停暂停播放模块：注册光标进入事件，光标进入，终止定时器；注册光标离开事件，光标离开，开启定时器

四、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>轮播图点击切换</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]


    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    const ul = document.querySelector('.slider-footer .slider-indicator')
    const footer = document.querySelector('.slider-footer')

    let i = 0
    function boFang() {
      img.src = `./images/slider0${i + 1}.jpg`
      p.innerHTML = sliderData[i].title
      footer.style.backgroundColor = sliderData[i].color
      //注意classList.remove()括号中的类名不需要加点号！
      document.querySelector('.slider-indicator .active').classList.remove('active')
      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
    }

    //自动播放模块
    let timer = setInterval(() => {
      next.click()//自动调用鼠标点击事件
    }, 1000)

    //手动播放模块
    const prev = document.querySelector('.prev')
    const next = document.querySelector('.next')
    prev.addEventListener('click', () => {
      i = i - 1 === -1 ? 7 : i - 1
      boFang()
    })
    next.addEventListener('click', () => {
      i = (i + 1) % 8
      boFang()
    })

    //鼠标悬停暂停播放模块
    const slider = document.querySelector('.slider')
    slider.addEventListener('mouseenter', () => {
      clearInterval(timer)
    })
    slider.addEventListener('mouseleave', () => {
      //开启定时器
      //注意，再次开启定时器不要写let timer
      timer = setInterval(() => {
        next.click()//自动调用鼠标点击事件
      }, 1000)
    })
</script>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/814466.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

闲鱼链接生成 仿闲鱼链接搭建

闲鱼链接生成 仿闲鱼链接搭建

教程&#xff1a;修改数据库账号密码直接使用。 源码带有教程! 下载程序&#xff1a;https://pan.baidu.com/s/16lN3gvRIZm7pqhvVMYYecQ?pwd6zw3
阅读更多...
layui框架学习（36：数据表格_复杂表头）

layui框架学习（36：数据表格_复杂表头）

table数据表格模块中的col属性支持配置复杂表头&#xff0c;其为二维数组&#xff0c;用于描述复杂表头中每个表头单元格的位置和尺寸信息&#xff08;colspan和rowspan描述表头单元格所占行数和列数&#xff09;。   从参考文献2-3给出的示例来看&#xff0c;描述复杂表头的…
阅读更多...
[数学公式] 1秒移动x米是多少码 x码一秒钟移动几米

[数学公式] 1秒移动x米是多少码 x码一秒钟移动几米

1秒移动x米是多少码&#xff1a;3.6x码 x码一秒钟移动几米&#xff1a;
阅读更多...
6、用restful风格写controller方法接口，单元测试依赖

6、用restful风格写controller方法接口，单元测试依赖

编写单元测试&#xff0c;用restful风格写controller方法 单元测试依赖 实际项目开发中&#xff0c;单元测试与业务代码通常都会要求同步进行 TDD测试驱动开发&#xff1a;先编写单元测试&#xff0c;然后努力去开发业务代码去满足所有的单元测试用例。 添加SpringBoot的测试…
阅读更多...
LeetCode_双指针_中等_143.重排链表

LeetCode_双指针_中等_143.重排链表

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 给定一个单链表 L 的头节点 head &#xff0c;单链表 L 表示为&#xff1a; L0 → L1 → … → L~n - 1~ → Ln 请将其重新排列后变为&#xff1a; L0 → Ln → L1 → L~n - 1~ → L2 → L~n - 2~ → … 不…
阅读更多...
python网站创建006：常见CSS样式

python网站创建006：常见CSS样式

1. 给标签添加样式有三种方式(在标签上添加、在head中添加、通过独立文件添加)。 其中(在head中添加、通过独立文件添加)是有选择器存在的 直接在标签上添加 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><tit…
阅读更多...
如何部署Redis哨兵

如何部署Redis哨兵

目录 一、Redis数据库 二、Redis哨兵模式 三、部署Redis哨兵 第一步 关闭防火墙和安全机制 第二步 修改Redis配置文件 第三步 开启Master主节点 第四步 查看哨兵信息 一、Redis数据库 ●主从复制&#xff1a;主从复制是高可用Redis的基础&#xff0c;哨兵和集群都是在主…
阅读更多...
使用 python 读取Excel文件并转换为时间格式

使用 python 读取Excel文件并转换为时间格式

通过Excel 做配置文件调整参数&#xff0c;转换为实时参数&#xff1a; naclo_reduce_ratio pd.read_excel(./config/naclo_reduce_ratio.xlsx, header0) # col_name [Time, r1, r2]time_lst [] for i, row in naclo_reduce_ratio.iterrows():now_time_lst str(row[Time]…
阅读更多...
Linux常用命令——dpkg-query命令

Linux常用命令——dpkg-query命令

在线Linux命令查询工具 dpkg-query Debian Linux中软件包的查询工具 补充说明 dpkg-query命令是Debian Linux中软件包的查询工具&#xff0c;它从dpkg软件包数据库中查询并辨识软件包的信息。 语法 dpkg-query(选项)(参数)选项 -l&#xff1a;列出符合匹配模式的软件包&…
阅读更多...
Android studio修改app图标

Android studio修改app图标

步骤如下&#xff1a; 1.右键app名称→New→ImageAsset 2. 进行下面的配置 图源&#xff1a;https://blog.csdn.net/Qingshan_z/article/details/126661650 3.配置分辨率 4.图标自动保存在mipmap文件夹下 再启动就更换成功了&#xff01;&#xff01;&#xff01; 参考&…
阅读更多...
10、自定义配置文件和自定义失败分析器

10、自定义配置文件和自定义失败分析器

自定义配置文件及失败分析器 改变项目配置的方式 默认行为&#xff1a; Spring Boot默认的配置文件&#xff1a;调用SpringApplication的run()方法启动Spring Boot应用时&#xff0c;Spring Boot会自动加载主配置类&#xff08;run方法第一个参数、该参数要用SpringBootAppli…
阅读更多...
腾讯云Cloud Studio：基于Claude快速完成Excel工资自动核算

腾讯云Cloud Studio：基于Claude快速完成Excel工资自动核算

目录 1 什么是Cloud Studio&#xff1f;2 注册与代码管理2.1 账号注册2.2 Git关联 3 实战&#xff1a;Excel工资自动核算3.1 创建项目与配置3.2 “念咒师”Claude GPT3.3 代码编写与运行 1 什么是Cloud Studio&#xff1f; Cloud Studio是腾讯云为开发者提供的一个基于浏览器的…
阅读更多...
Redis数据库 | 事务、持久化

Redis数据库 | 事务、持久化

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; Redis事务操作 Redis事务是一组命令的集合&#xff0c;这些命令会作为一个整体被执行&#xff0c;要么全部执行成功&#xff0c;要么全部执行失败&#xff1b;Redis事…
阅读更多...
牛客网Verilog刷题——VL43

牛客网Verilog刷题——VL43

牛客网Verilog刷题——VL43 题目题目解析答案 题目 如图所示为两种状态机中的一种&#xff0c;请根据状态转移图写出代码&#xff0c;状态转移线上的0/0等表示的意思是过程中data/flag的值。 要求&#xff1a; 1、 必须使用对应类型的状态机 2、 使用三段式描述方法&#xf…
阅读更多...
SAP MTO 2案例教程PP物料需求计划前台操作

SAP MTO 2案例教程PP物料需求计划前台操作

目录 本章介绍 2 显示销售订单BOM 3 库存需求清单 5 单个销售订单运行MRP计划 6 集中运行MRP 9 再显示库存需求清单 11 集中转换采购申请 13 单个销售订单创建生产订单 15 集中转换生产订单 17 批量显示生产订单 19 本章小结 20 本章介绍 本章内容包括&#xff0c;单个销售订单…
阅读更多...
【计算复杂性理论】证明复杂性（八）：命题鸽巢原理（Propositional Pigeonhole Principle）的指数级归结下界

【计算复杂性理论】证明复杂性（八）：命题鸽巢原理（Propositional Pigeonhole Principle）的指数级归结下界

往期文章&#xff1a; 【计算复杂性理论】证明复杂性&#xff08;Proof Complexity&#xff09;&#xff08;一&#xff09;&#xff1a;简介 【计算复杂性理论】证明复杂性&#xff08;二&#xff09;&#xff1a;归结&#xff08;Resolution&#xff09;与扩展归结&#xff…
阅读更多...
华为鸿蒙4本周发布：官方海报大有玄机！告别“人工智障”！

华为鸿蒙4本周发布：官方海报大有玄机！告别“人工智障”！

一年一度的华为开发者大会2023(HDC.Together)将于8月4日至8月6日在东莞松山湖举办。相比去年&#xff0c;今年的华为开发者大会足足提前了三个月&#xff0c;而本次大会主角之一无疑是全新国产操作系统鸿蒙4&#xff08;HarmonyOS 4&#xff09;。 官方之前用了三个词来形容鸿蒙…
阅读更多...
python将多张图片拼成一张矩阵图，合成一张大图

python将多张图片拼成一张矩阵图，合成一张大图

用Python实现将多张图片排列成n*m的图像矩阵图 目录 引言环境准备代码实现效果演示总结 引言 在图像处理和图像展示的应用中&#xff0c;将多张图片排列成一个图像矩阵图是一个常见的需求。本博客介绍如何使用Python实现将12张图片排列成n*m的图像矩阵图。 环境准备 为了实…
阅读更多...
Windows上安装 Go 环境并配置环境变量 （超详细教程）

Windows上安装 Go 环境并配置环境变量 （超详细教程）

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…
阅读更多...
誉天程序员-2301-3-金典图书系统

誉天程序员-2301-3-金典图书系统

Day01- 搭建环境Vite项目ElementPlusRouter Day02- 路由框架首页登录页面表单验证 Day03- 访问后端axios跨域跳转通知框 Dya04- VueUse登出拦截器SSOVuex Day05- 安全守卫布局菜单面包屑 Day06- 用户管理抽屉新增修改删除 Day07- 书籍管理对话框批量删除查询 Day08- 标签页eCh…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023