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)' },
    ]
    const img = document.querySelector(`.slider-wrapper img`)//获取slider-wrapper类下的图片
    const p = document.querySelector(`p`) //获取p标签
    //开始定时轮番
    let i = 0
    setInterval(function () {
      i++ //因为进入页面会显示第一个所以都要在第一个之后显示
      //每次循环完成后从头开始
      if(i==sliderData.length){
        i=0
      }
      img.src = sliderData[i].url //更改第i个图像
      p.innerHTML = sliderData[i].title  //更改第i个标题文字
      //更改小圆点
          //每次删除上一次的小圆点亮
          document.querySelector(`.slider-indicator .active`).classList.remove(`active`)
        //获取小圆点
        document.querySelector(`.slider-indicator li:nth-child(${i+1})`).classList.add(`active`)//因为内容有0-7,但是小圆点是1-8{变亮 active 这个类}
    }, 1000)
  </script>
</body>

</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

jvm学习笔记-轻量级锁内存模型

一&#xff0c;轻量级锁 LockRecord的那个第一个成员变量是拷贝对应锁定了的java对象资源的MarkWord&#xff0c;Lock Record有一个Ptr指针刚开始指向自己&#xff0c;后面这个指针存储在锁定资源的java对象的markword中&#xff0c;后续可以通过java对象的MarkWord快速定位到…

职场浅谈:情商高的“4”种表现,情商高的人才更容易走向成功

职场上&#xff0c;情商高的人总是让人感觉很舒服&#xff0c;也让人情不自禁的愿意和他交往。高情商的人&#xff0c;最大的优点就是让人感觉舒服&#xff0c;这种舒服由内自外&#xff0c;让你情不自禁的对他产生好感&#xff0c;并且发自内心的愿意和他在一起&#xff0c;也…

win11电脑无法找到声音输出设备怎么办?查看解决方法

电脑无法找到声音输出设备是一个常见的问题&#xff0c;尤其是在使用Windows操作系统时。幸运的是&#xff0c;大部分问题都可以通过以下几种方法来解决。 一、检查物理连接 在深入诊断之前&#xff0c;首先要检查硬件连接是否正常。这包括&#xff1a; 确保耳机、扬声器或其…

大模型微调技术 --> LoRA 系列之 QLoRA (省资源能手)

QLoRA 1.摘要 作者提出了QLoRA&#xff0c;一种有效的微调方法&#xff0c;可以减少内存使用&#xff0c;足以在单个48 GB GPU上微调 65B 参数模型&#xff0c;同时保留完整的 16位 微调任务性能。 QLoRA 通过冻结的4位量化预训练语言模型将梯度反向传播到低秩适配器&#x…

Vert.x,应用监控 - 基于Micrometer / Prometheus

对于企业级的应用程序来说&#xff0c;我们需要通过运行指标(metrics)的监控&#xff0c;来了解(监控)程序的运行状态。Vert.x的核心组件内置了大量的运行指标&#xff0c;并支持通过Micrometer来管理这些运行指标并向后端报告。 目前Vertx内置运行指标的核心组件包括: TCP/HTT…

如何用PPT画箭头?用这2个ppt软件快速完成绘图!

ppt怎么画箭头&#xff1f; 有时在ppt中绘制流程图或传达承上启下的含义时&#xff0c;会用到箭头形状&#xff0c;运用到箭头元素来增强表达的清晰度和逻辑性。那可能有人会问&#xff0c;ppt怎么画箭头&#xff1f; 这似乎是一个小问题&#xff0c;但如果你对ppt工具不够熟…

java: 无法访问org.springframework.web.bind.annotation.RequestMapping

一、报错问题 java: 无法访问org.springframework.web.bind.annotation.RequestMapping 二、原因分析 SpringBoot使用了3.0或者3.0以上&#xff0c;因为Spring官方发布从Spring6以及SprinBoot3.0开始最低支持JDK17。所以仅需要将SpringBoot版本降低为3.0以下即可&#xff08;或…

[ DOS 命令基础 3 ] DOS 命令详解-文件操作相关命令

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…

【TS】九天学会TS语法——3.TypeScript 函数

今天学习 TypeScript 的函数&#xff0c;包括函数类型、可选参数、默认参数、剩余参数。 函数声明和表达式函数类型可选参数和默认参数剩余参数 在 TypeScript 中&#xff0c;函数是编程的核心概念之一。它们允许我们将代码组织成可重用的块&#xff0c;并提供了强大的抽象能力…

Kafka 源码 KRaft 模式本地运行

KRaft&#xff08;Kafka Raft Metadata mode&#xff09;&#xff0c;从版本 2.8.0 开始作为测试特性引入&#xff0c;并在后续版本中持续得到改进和增强。 KRaft 模式是指 Kafka 使用 Raft 协议来管理集群元数据的一种运行模式&#xff0c;这标志着 Kafka 向去除对 ZooKeeper …

day05(单片机)SPI+数码管

目录 SPI数码管 SPI通信 SPI总线介绍 字节交换原理 时序单元 ​​​​​​​SPI模式 模式0 模式1 模式2 模式3 数码管 介绍 74HC595芯片分析 ​​​​​​​原理图分析 ​​​​​​​cubeMX配置​​​​​​​ 程序编写 硬件SPI ​​​​​​​软件SPI 作业&#xff1a; SPI数…

数据结构和算法-贪心算法01- 认识贪心

贪心算法 什么是贪心算法 一个贪心算法总是做出当前最好的选择&#xff0c;也就是说&#xff0c;它期望通过局部最优选择从而得到全局最优的解决方案。 ​ ----《算法导论》 贪心算法(Greedy Method): 所谓贪心算法就是重复地(或贪婪地)根据一个法则挑选解的一部分。当挑选完毕…

创新实践:基于边缘智能+扣子的智慧婴儿监控解决方案

在2024年全国大学生物联网设计竞赛中&#xff0c;火山引擎作为支持企业&#xff0c;不仅参与了赛道的命题设计&#xff0c;还为参赛队伍提供了相关的硬件和软件支持。以边缘智能和扣子的联合应用为核心&#xff0c;参赛者们在这场竞赛中的方案展现出了卓越的创新性和实用性&…

6款IntelliJ IDEA插件,让Spring和Java开发如虎添翼

文章目录 1、SonarLint2、JRebel for IntelliJ3、SwaggerHub插件4、Lombok插件5、RestfulTool插件6、 Json2Pojo插件7、结论 对于任何Spring Boot开发者来说&#xff0c;两个首要的目标是最大限度地提高工作效率和确保高质量代码。IntelliJ IDEA 是目前最广泛使用的集成开发环境…

CSS弹性布局:灵活布局的终极指南

在网页设计中&#xff0c;CSS 弹性布局&#xff08;Flexbox&#xff09;是一个不可或缺的工具。它能帮助你轻松地排列和对齐元素&#xff0c;尤其是在响应式设计中表现出色。今天&#xff0c;我们就来深入探讨一下 Flexbox 的各个属性&#xff0c;让你彻底掌握这个强大的布局工…

论文阅读:Computational Long Exposure Mobile Photography (一)

这篇文章是谷歌发表在 2023 ACM transaction on Graphic 上的一篇文章&#xff0c;介绍如何在手机摄影中实现长曝光的一些拍摄效果。 Abstract 长曝光摄影能拍出令人惊叹的影像&#xff0c;用运动模糊来呈现场景中的移动元素。它通常有两种模式&#xff0c;分别产生前景模糊或…

CTF入门教程(非常详细)从零基础入门到竞赛,看这一篇就够了!

目录 一、CTF简介 二、CTF竞赛模式 三、CTF各大题型简介 四、CTF学习路线 4.1、初期 1、htmlcssjs&#xff08;2-3天&#xff09; 2、apachephp &#xff08;4-5天&#xff09; 3、mysql &#xff08;2-3天&#xff09; 4、python (2-3天) 5、burpsuite &#xff08;…

linux 进程调度学习笔记

https://zhuanlan.zhihu.com/p/1248579228 吐血整理 | 肝翻 Linux 进程调度所有知识点 执行调度 Kernel 判断当前进程标记是否为 TIF_NEED_RESCHED&#xff0c;是的话调用 schedule 函数&#xff0c;执行调度&#xff0c;切换上下文&#xff0c;这也是上面抢占(preempt)机制的…

django图书管理系统-计算机毕业设计源码00648

摘要 图书管理系统在数字化阅读趋势、图书馆自动化管理、用户体验需求和信息技术应用等方面具有重要的研究意义。图书馆自动化管理系统的引入和应用提高了图书借阅过程的效率和准确性&#xff0c;减少了对手工操作和纸质记录的需求。用户对系统的易用性、查询速度、借还流程有更…

SQL实战训练之,力扣:2020. 无流量的帐户数(递归)

目录 一、力扣原题链接 二、题目描述 三、建表语句 四、题目分析 五、SQL解答 六、最终答案 七、验证 八、知识点 一、力扣原题链接 2020. 无流量的帐户数 二、题目描述 表: Subscriptions ------------------- | Column Name | Type | ------------------- | accoun…