js例轮播图定时器版

news2024/11/8 12:20:46

 要求

<!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>

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

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

相关文章

PostgreSQL 学习笔记:PostgreSQL 主从复制

PostgreSQL 笔记&#xff1a;PostgreSQL 主从复制 博客地址&#xff1a;TMDOG 的博客 在现代应用程序中&#xff0c;数据库的高可用性和扩展性是至关重要的。PostgreSQL 提供了主从复制功能&#xff0c;可以在多个数据库实例之间复制数据&#xff0c;以实现冗余和负载均衡。本…

【系统集成项目管理工程师教程】第5章 软件工程

软件工程是一门研究用工程化方法构建和维护有效、实用和高质量软件的学科&#xff0c;涵盖软件需求、设计、实现、测试、部署交付、质量管理和过程能力成熟度等方面&#xff0c;旨在提高软件生产率、质量并降低成本&#xff0c;确保软件项目的成功开发与维护。 5.1软件工程定义…

Java项目实战II基于Spring Boot的便利店信息管理系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在快节奏的…

vscode Comment Translate 反应慢 加载中...

Comment Translate 版本&#xff1a;v2.3.3 你是不是疑惑切换了 Bing 源也无法使用还是加载中… 那么可能你切换Bing后没重启vscode 下面是切换成功后的插件日志&#xff0c;一定要重启vscode&#xff0c;只是禁用和启用插件不行的&#xff0c;另外google是没用的&#xff0c;用…

网站架构知识之Ansible(day020)

1.Ansible架构 Inventory 主机清单:被管理主机的ip列表,分类 ad-hoc模式: 命令行批量管理(使用ans模块),临时任务 playbook 剧本模式: 类似于把操作写出脚本,可以重复运行这个脚本 2.修改配置 配置文件&#xff1a;/etc/ansible/ansible.cfg 修改配置文件关闭主机Host_key…

智启未来,趣享生活 德国卡赫举办系列新品首发活动

全球最大的清洁设备和清洁解决方案提供商德国卡赫&#xff0c;于11月6日在第七届进博会新品发布平台举办主题为“智启未来&#xff0c;趣享生活”的新品发布会&#xff0c;揭开全球首发新品可折叠式手持清洗机KHB Air以及亚洲首发新品商用清洁机器人KIRA CV 50的神秘面纱。作为…

xlsx.js 读取excel文件

需求&#xff1a;读取一个excel文件。 一、 使用antd的Upload组件的 【customRequest】方法。 互斥。此方法跟【onChange】方法互斥&#xff0c;即&#xff1a;不可同时出现。调用次数不一样。onChange方法会根据文件当前的上传状态从而被调用多次&#xff08;读取中&#xff…

WPF中的依赖属性

1.创建项目后下载两个NuGet程序包 2.创建一个MyButton类继承Button MyButton类如下&#xff1a; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Contro…

Java执行顺序大揭秘:静态块、非静态块和构造方法谁先谁后?

我是小米,一个喜欢分享技术的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! Hello大家好,我是小米!今天咱们来聊聊Java中的一个小而重要的知识点——初始化块。可能有的小伙伴一听这名字就觉得有点头大,这东西到底是干嘛的?为…

【Linux系列】字符串操作的艺术:删除前缀的 Shell 脚本技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

nginx 部署2个相同的vue

起因&#xff1a; 最近遇到一个问题&#xff0c;在前端用nginx 部署 vue&#xff0c; 发现如果前端有改动&#xff0c;如果不适用热更新&#xff0c;而是直接复制项目过去&#xff0c;会404 因此想到用nginx 负载两套相同vue项目&#xff0c;然后一个个复制vue项目就可以了。…

Maven(六)mvn 命令将 jar 包推送到 远程/本地仓库

目录 一、deploy - 推送到远程仓库1.1 命令语法&#xff1a;1.2 执行结果&#xff1a;1.3 可能遇到的问题问题1&#xff1a;with status code 401问题2&#xff1a;with status code 405问题3&#xff1a;Cannot deploy artifact from the local repository 二、install - 推送…

WEB 应用防护系统的部署方式

在当今数字化飞速发展的时代&#xff0c;WEB 应用面临着来自各方的安全威胁&#xff0c;而 WEB 应用防护系统&#xff08;WAF&#xff09;的部署成为了保障网络安全至关重要的环节。以下将详细介绍几种常见的 WEB 应用防护系统部署方式。根据 WAF 接入网络后的工作方式&#xf…

Java——静态成员

一、静态变量&#xff08;Static Variables&#xff09; 1、静态变量是什么 静态变量&#xff0c;又被称为类变量&#xff0c;它使用 static 关键字修饰。静态变量是类级别的变量&#xff0c;在类加载时初始化。 2、静态变量的特点 类级别共享&#xff1a;静态变量在所有实…

Java | Leetcode Java题解之第542题01矩阵

题目&#xff1a; 题解&#xff1a; class Solution {static int[][] dirs {{-1, 0}, {1, 0}, {0, -1}, {0, 1}};public int[][] updateMatrix(int[][] matrix) {int m matrix.length, n matrix[0].length;// 初始化动态规划的数组&#xff0c;所有的距离值都设置为一个很大…

996引擎 - 活捉NPC

996引擎 - 活捉NPC 引擎触发 - 引擎事件(QF)事件处理模块 GameEvent测试文件参考资料 引擎触发 - 引擎事件(QF) cfg_game_data 配置 ShareNpc1 可以将QM和机器人的触发事件全部转到 QF 引擎触发是通用的,TXT的所有触发转换成小写后在LUA中就可使用,如说明书中缺省可反馈至对接群…

【Linux系统编程】第四十三弹---多线程编程指南:线程终止方式与C++11中的thread

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、线程终止 1.1、pthread_exit() 1.2、pthread_cancel() 1.3、pthread_detach() 2、C11中thread 1、线程终止 问题7 …

【Mac】PD报错:无法为“Windows” 完成操作,虚拟机ID无效的解决办法

Parallels Desktop是Mac上一款非常常用的虚拟机软件&#xff0c;但是在使用过程中&#xff0c;可能会遇到一些问题不知道如何处理。比如有时会遇到PD报错&#xff1a;无法为“Windows 11”完成操作&#xff0c;虚拟机ID无效。 错误原因 电脑上安装过虚拟机&#xff0c;虚拟机被…

25-RVIZ CARLA插件

RVIZ插件(RVIZ plugin)提供了一个基于RVIZ(RVIZ) ROS包的可视化工具。 用RVIZ运行ROS桥接 RVIZ插件需要一个名为ego_vehicle的自车。要查看ROS-bridge使用RVIZ的示例&#xff0c;请在运行CARLA服务器的情况下执行以下命令&#xff1a; 1. 启用RVIZ启动ROS桥接&#xff1a; # …

spark-本地模式的配置和简单使用

python环境的安装 在虚拟机中&#xff0c;只能安装一个python的版本&#xff0c;若想要安装别的版本&#xff0c;则需要卸载之前的版本——解决方式&#xff0c;安装Anaconda 通过百度网盘分享的文件&#xff1a;Anaconda3-2021.05-Linux-x86_64.sh 链接&#xff1a;https://…