当前位置: 首页 > news >正文

轮播图html

题十二:轮播图

要求:
1.鼠标不在图片上方时,进行自动轮播,并且左右箭头不会显示;当鼠标放在图片上方时,停止轮播,并且左右箭头会显示;
2.图片切换之后,图片中下方的小圆点会同时进行切换,并且点击相应的小圆点可以切换到相应的图片上;
3.点击左右箭头可以进行左右图片的切换;
4.图片上需有介绍的文字,会随图片切换一起进行切换。

原理:

  1. 当鼠标进入时,左走箭头出现,定时器关闭,离开时,箭头消失,定时器开启。
  2. 写DOM对应的小圆点,找让图片文字小圆点的高亮移除,再当索引值到了之后,添加高亮事件.
  3. 当点击左图右图是分别修改其对应的索引号.
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义轮播图</title><style>#container {margin: 0 auto;position: relative;width: 600px;height: 600px;overflow: hidden;}#container img {width: 100%;height: 100%;background-size: cover;display: none;}#container img.active {display: block;}.arrow {position: absolute;top: 50%;transform: translateY(-50%);font-size: 30px;color: white;background: rgba(0, 0, 0, 0.3);padding: 10px 15px;cursor: pointer;display: none;}#left {left: 10px;}#right {right: 10px;}#dots {position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);display: flex;}#dots span {width: 10px;height: 10px;border-radius: 50%;background: gray;margin: 0 5px;cursor: pointer;}#dots span.active {background: white;}.name {position: absolute;bottom: 0;width: 100%;background: rgba(0, 0, 0, 0.5);color: white;padding: 10px;text-align: center;font-size: 30px;}</style>
</head><body><div id="container"><img src="./任务/交互图片/1.jpg" alt="图片1" class="active"><div class="name">fall'in out</div><img src="./任务/交互图片/2.jpg" alt="图片2"><div class="name">找自己</div><img src="./任务/交互图片/3.jpg" alt="图片3"><div class="name">单车恋人</div><span id="left" class="arrow">&lt;</span><span id="right" class="arrow">&gt;</span><div id="dots"></div></div><script>const Container = document.querySelector('#container')const images = document.querySelectorAll('#container img')const names = document.querySelectorAll('.name')const dotsContainer = document.getElementById('dots')const Left = document.querySelector('#left')const Right = document.querySelector('#right')//当前显示图片的索引let currentIndex = 0//命名自动播放定时器let autoplayIntervalfunction onMouseEnter() {//鼠标一进入就关闭定时器clearInterval(autoplayInterval)Left.style.display = 'block'Right.style.display = 'block'}function onMouseLeave() {//开启startAutoplay()Left.style.display = 'none'Right.style.display = 'none'}Left.addEventListener('click', () => {clearInterval(autoplayInterval)//一定要调用leftImage()});Right.addEventListener('click', () => {clearInterval(autoplayInterval)rightImage()})Container.addEventListener('mouseenter', function() {onMouseEnter()})Container.addEventListener('mouseleave', function() {onMouseLeave()})// 显示指定索引的图片function showImage(index) {images.forEach((img, i) => {//先全部移除高亮img.classList.remove('active')//文字也先不显示names[i].style.display = 'none'})dotsContainer.querySelectorAll('span').forEach((dot, i) => {//小圆点高亮移除dot.classList.remove('active')})//到相应的索引号,高亮和文字显示images[index].classList.add('active')names[index].style.display = 'block'//小圆点高亮添加dotsContainer.querySelectorAll('span')[index].classList.add('active')//修改索引号currentIndex = index}function createDots() {//回调函数,函数对应的DOM元素及索引号images.forEach((_, index) => {//新建小圆点,有几个DOM建几个const dot = document.createElement('span')if (index === 0) {//默认高亮类名dot.classList.add('active')}dot.addEventListener('click', function() {//一旦点击,关闭定时器clearInterval(autoplayInterval)showImage(index)})//根据DOM数量,添加小圆点dotsContainer.appendChild(dot)});}// 右图function rightImage() {//index+1currentIndex = (currentIndex + 1) % images.lengthshowImage(currentIndex)}// 左图function leftImage() {//同理currentIndex = (currentIndex - 1 + images.length) % images.lengthshowImage(currentIndex);}function startAutoplay() {autoplayInterval = setInterval(rightImage, 1500)}// 调用小圆点和自动播放,使页面一开始就有效果createDots()startAutoplay()</script>
</body></html>

轮播图

相关文章:

轮播图html

题十二&#xff1a;轮播图 要求&#xff1a; 1.鼠标不在图片上方时&#xff0c;进行自动轮播&#xff0c;并且左右箭头不会显示&#xff1b;当鼠标放在图片上方时&#xff0c;停止轮播&#xff0c;并且左右箭头会显示&#xff1b; 2.图片切换之后&#xff0c;图片中下方的小圆…...

二十多年前的苹果电源Power Mac G4 Mdd 电源接口

在1999年&#xff0c;苹果推出了最初的Power Mac G4电脑。第一代Power Mac G4有与G3系列相似的外壳和两种主板设置&#xff0c;分别使用PCI和AGP显示总线。第二代电脑被昵称为快银或水银机&#xff0c;来自2001年的它们有更高速的PowerPC 7450系列芯片&#xff0c;增强了L2缓存…...

java听书项目

项目的架构 网关:1路由转发 2.认证鉴权(token)3.统一处理(跨域) Mysql:关系型数据库 ES:搜索数据库 Redis:页面级缓存,会话状态存储 GitLab:私有托管平台 K8S:自动化部署、扩展和管理容器化应用程序的开源系统 Jenkins:自动化部署 1.环境搭建 创建一个父工程…...

RadASM环境,win32汇编入门教程之三

;运行效果 ;win32汇编环境&#xff0c;RadAsm入门教程之三 ;在这个教程里&#xff0c;我们学一下如何增加控件&#xff0c;比如按钮&#xff0c;其它的控件类似这样增加 ;以下的代码就是在教程一的窗口模版里增加一个按钮控件&#xff0c;可以比较一下&#xff0c;增加了什么内…...

【机器学习】线性回归 多元线性回归

【机器学习系列】 KNN算法 KNN算法原理简介及要点 特征归一化的重要性及方式线性回归算法 线性回归与一元线性回归 线性回归模型的损失函数 多元线性回归 多项式线性回归 多元线性回归 V1.0多元线性回归一元线性回归与多元线性回归多元线性回归模型的误差衡量多元线性回归的最…...

线性代数中的正交和标准正交向量

在线性代数中&#xff0c;理解正交向量和正交向量至关重要&#xff0c;尤其是对于机器学习中的应用。这篇博文将简化这些概念&#xff0c;而不会太深入地深入研究复杂的数学。 正交向量 如果两个向量的点积等于零&#xff0c;则认为这两个向量是正交的。但点积到底是什么呢&am…...

Vue 项目登录的基本流程

Vue 用户登录的基本流程包括以下6个步骤&#xff1a; 步骤&#xff1a; 1. 创建登录表单 在前端&#xff0c;首先要创建一个登录表单&#xff0c;用户输入账号&#xff08;用户名、邮箱、手机号等&#xff09;和密码。 示例&#xff1a;Login.vue <template><div…...

坐井说天阔---DeepSeek-R1

前言 DeepSeek-R1这么火&#xff0c;虽然网上很多介绍和解读&#xff0c;但听人家的总不如自己去看看原论文。于是花了大概一周的时间&#xff0c;下班后有进入了研究生的状态---读论文。 DeepSeek这次的目标是探索在没有任何监督数据的情况下训练具有推理能力的大模型&#…...

Spring 是如何解决循环依赖问题的?

Spring框架通过使用三级缓存机制来解决单例Bean之间的循环依赖问题。以下是详细的解释&#xff0c;包括循环依赖的概念、Spring的解决方案以及三级缓存的具体作用。 什么是循环依赖&#xff1f; 循环依赖是指两个或多个Bean之间相互依赖&#xff0c;形成一个闭环。例如&#…...

【数据可视化-17】基于pyecharts的印度犯罪数据可视化分析

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

thingboard告警信息格式美化

原始报警json内容&#xff1a; { "severity": "CRITICAL","acknowledged": false,"cleared": false,"assigneeId": null,"startTs": 1739801102349,"endTs": 1739801102349,"ackTs": 0,&quo…...

Javaweb中,使用Servlet编写简单的接口

案例&#xff1a;网页提交用户名和密码信息&#xff0c;后端校验密码长度需在6-12位之间 后端部分 WebServlet("/valid") public class SimpleServlet extends HttpServlet{public void service(HttpServletRequest req, HttpServletResponse resp) throws IOExcepti…...

三层渗透测试-DMZ区域 二三层设备区域

DMZ区域渗透 信息收集 首先先进行信息收集&#xff0c;这里我们可以选择多种的信息收集方式&#xff0c;例如nmap如此之类的&#xff0c;我的建议是&#xff0c;可以通过自己现有的手里小工具&#xff0c;例如无影&#xff0c;密探这种工具&#xff0c;进行一个信息收集。以免…...

Java 开发者需要了解的 PDF 基础知识

PDF 代表“可移植文档格式”&#xff08;Portable Document Format&#xff09;&#xff0c;它是全球最流行的文件格式。因此&#xff0c;Java 开发人员很可能会经常需要处理它。然而&#xff0c;与 Microsoft Word 或 HTML/XML 这样的格式相比&#xff0c;PDF 并不那么直观。理…...

基于图像处理的裂缝检测与特征提取

一、引言 裂缝检测是基础设施监测中至关重要的一项任务,尤其是在土木工程和建筑工程领域。随着自动化技术的发展,传统的人工巡检方法逐渐被基于图像分析的自动化检测系统所取代。通过计算机视觉和图像处理技术,能够高效、精确地提取裂缝的几何特征,如长度、宽度、方向、面…...

Webpack 基础入门

一、Webpack 是什么 Webpack 是一款现代 JavaScript 应用程序的静态模块打包工具。在 Web 开发中&#xff0c;我们的项目会包含各种类型的文件&#xff0c;如 JavaScript、CSS、图片等。Webpack 可以将这些文件打包成一个或多个文件&#xff0c;以便在浏览器中高效加载。它就像…...

掌握SQLite_轻量级数据库的全面指南

1. 引言 1.1 SQLite简介 SQLite 是一个嵌入式关系型数据库管理系统,它不需要单独的服务器进程或系统配置。它的设计目标是简单、高效、可靠,适用于各种应用场景,尤其是移动设备和嵌入式系统。 1.2 为什么选择SQLite 轻量级:文件大小通常在几百KB到几MB之间。无服务器架构…...

大数据处理如何入门

大数据处理的入门可以从以下几个方面入手&#xff1a; 1. 基础知识学习 在深入大数据领域之前&#xff0c;建议先掌握一些基础知识&#xff0c;包括数据类型、存储与处理的基本概念&#xff0c;以及常用的数据处理工具。例如&#xff0c;Python或Java编程语言在大数据领域应用…...

算法与数据结构(最小栈)

题目 思路 为了返回栈中的最小元素&#xff0c;我们需要额外维护一个辅助栈 min_stack&#xff0c;它的作用是记录当前栈中的最小值。 min_stack的作用&#xff1a; min_stack的栈顶元素始终是当前栈 st 中的最小值。 每当st中压入一个新元素时&#xff0c;如果这个元素小于等…...

LeetCode 1287.有序数组中出现次数超过25%的元素:遍历

【LetMeFly】1287.有序数组中出现次数超过25%的元素&#xff1a;遍历 力扣题目链接&#xff1a;https://leetcode.cn/problems/element-appearing-more-than-25-in-sorted-array/ 给你一个非递减的 有序 整数数组&#xff0c;已知这个数组中恰好有一个整数&#xff0c;它的出…...

春招项目=图床+ k8s 控制台(唬人专用)

1. 春招伊始 马上要春招了&#xff0c;一个大气的项目&#xff08;冲击波项目&#xff09;直观重要&#xff0c;虽然大家都说基础很重要&#xff0c;但是一个足够新颖的项目完全可以把你的简历添加一个足够闪亮的点。 这就不得不推荐下我的 k8s 图床了&#xff0c;去年折腾快…...

Vue 记录用户进入页面的时间、离开页面的时间并计算时长

在 Vue 项目中&#xff0c;要记录用户进入页面的时间、离开页面的时间&#xff0c;并在用户离开时计算时长并调用后端接口&#xff0c;可以借助 Vue 的生命周期钩子和浏览器的一些事件来实现。以下是具体的实现步骤和示例代码&#xff1a; 实现思路 记录进入时间&#xff1a;…...

解锁豆瓣高清海报(三)从深度爬虫到URL构造,实现极速下载

脚本地址: 项目地址: Gazer PosterBandit_v2.py 前瞻 之前的 PosterBandit.py 是按照深度爬虫的思路一步步进入海报界面来爬取, 是个值得学习的思路, 但缺点是它爬取慢, 仍然容易碰到豆瓣的 418 错误, 本文也会指出彻底解决旧版 418 错误的方法并提高爬取速度. 现在我将介绍…...

机器学习--逻辑回归

机器学习–逻辑回归 一、认知革命&#xff1a;从线性回归到逻辑回归 1.1 本质差异对比 维度线性回归逻辑回归输出类型连续值概率值 (0-1)目标函数最小二乘法极大似然估计数学表达式 y w T x b yw^Txb ywTxb p 1 1 e − ( w T x b ) p\frac{1}{1e^{-(w^Txb)}} p1e−(wTxb…...

gradio创建openai前端对接deepseek等模型流式输出markdown格式文本

环境 gradio3.50.2 openai1.63.1代码 import openai import gradio as gr#导入gradio的包api_key "sk-**a8" api_base "https://api.deepseek.com/v1"import gradio as gr import openai from typing import List, Any, Iteratorclient openai.OpenAI…...

【LeetCode Hot100】最大子数组和|动态规划/贪心,Java实现!图解+代码,小白也能秒懂!

&#x1f4bb; [LeetCode Hot100] 最大子数组和&#xff5c;动态规划/贪心&#xff0c;Java实现&#xff01;图解代码&#xff0c;小白也能秒懂&#xff01; ✏️本文对应题目链接&#xff1a;最大子数组和 &#x1f4cc; 题目描述 给定一个整数数组 nums&#xff0c;找到一个…...

【Go语言快速上手】第二部分:Go语言进阶之网络编程

文章目录 前言&#xff1a;网络编程一、TCP/UDP 编程&#xff1a;net 包的使用1. TCP 编程1.1 TCP 服务器1.2 TCP 客户端 2. UDP 编程2.1 UDP 服务器2.2 UDP 客户端 二、HTTP 编程&#xff1a;net/http 包的使用&#xff0c;编写 HTTP 服务器和客户端2.1 HTTP 服务器2.2 HTTP 客…...

AI法理学与责任归属:技术演进下的法律重构与伦理挑战

文章目录 引言:智能时代的新型法律困境一、AI技术特性对传统法理的冲击1.1 算法黑箱与可解释性悖论1.2 动态学习系统的责任漂移1.3 多智能体协作的责任稀释二、AI法理学的核心争议点2.1 法律主体资格认定2.2 因果关系的技术解构2.3 过错标准的重新定义三、责任归属的实践案例分…...

Linux探秘坊-------8.进程详解

1.概念详解 1.运行&&阻塞&&挂起 内容基础&#xff1a;方框中的就是调度队列&#xff0c;是一个 双向队列&#xff0c;每一个元素是PCB其对应的代码数据 1.运行 只要进程 在调度队列中&#xff0c;进程的状态就是运行&#xff08;running&#xff09;. 2.阻塞…...

C#使用文件读写操作实现仙剑五前传称号存档修改

手把手教学仙剑五前传 称号存档修改器 首先找到 Pal5Q所在目录的save\global.sav 文件,这是一个只有488字节的文件,这里存放称号对应的编号ID,以及是否已获得该称号,1为已获取称号,0为未获取称号 [称号:是否获取]这是一个键值对 称号的编号ID是一个Int32数字,使用C#的方法Bi…...

Kubernetes知识点总结(十)

什么是 K8s 的 namespace&#xff1f; 在 K8s 中&#xff0c;Namespace&#xff08;名字空间&#xff09;提供了一种机制&#xff0c;将同一集群中的资源划分为相互隔离的组&#xff0c; 是在多个用户之间划分集群资源的一种方法。 名字空间作用域仅针对带有名字空间的对…...

【达梦数据库】disql工具参数绑定

前言 在达梦数据库的使用过程中尽管管理工具很好用&#xff0c;但是命令行工具还是有着得天独厚的优势&#xff0c;但是在参数绑定方面就没有管理工具做的更加完美&#xff0c;现在就汇总下disql 工具参数绑定的常用几种方式 disql 参数绑定 使用 ? select * from v$dm_in…...

箭头函数的this指向谁

先看1个重要原则&#xff1a; 由Vue管理的函数&#xff0c;一定不要写箭头函数&#xff0c;箭头函数的this就不再是Vue实例了 箭头函数的 this 指向在定义时确定&#xff0c;继承自外层作用域&#xff08;即定义时的上下文&#xff09;的 this&#xff0c;且无法通过 call、app…...

Node.js技术原理分析系列——Node.js调试能力分析

本文由体验技术团队屈金雄原创。 Node.js 是一个开源的、跨平台的 JavaScript 运行时环境&#xff0c;它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8引擎构建的&#xff0c;专为高性能、高并发的网络应用而设计&#xff0c;广泛应用于构建服务器端应…...

网络基础 【UDP、TCP】

1.UDP 首先我们学习UDP和TCP协议 要从这三个问题入手 1.报头和有效载荷如何分离、有效载荷如何交付给上一层的协议&#xff1f;2.认识报头3.学习该协议周边的问题 UDP报头 UDP我们先从示意图来讲解&#xff0c;认识报头。 UDP协议首部有16位源端口号&#xff0c;16位目的端…...

python旅游推荐系统+爬虫+可视化(协同过滤算法)

✅️基于用户的协同过滤算法 ✅️有后台管理 ✅️2w多数据集 这个旅游数据分析推荐系统采用了Python语言、Django框架、MySQL数据库、requests库进行网络爬虫开发、机器学习中的协同过滤算法、ECharts数据可视化技术&#xff0c;以实现从网站抓取旅游数据、个性化推荐和直观展…...

数据结构 树的存储和遍历

一、树的定义 树的定义 树型结构是⼀类重要的⾮线性数据结构。 • 有⼀个特殊的结点&#xff0c;称为根结点&#xff0c;根结点没有前驱结点。 • 除根结点外&#xff0c;其余结点被分成M个互不相交的集合T1 、T2 、...、Tm T&#xff0c;其中每⼀个集合⼜是⼀棵树&#xff0c…...

《解锁自然语言处理:让公众正确拥抱AI语言魔法》

在当今数字化浪潮中&#xff0c;自然语言处理&#xff08;NLP&#xff09;技术作为人工智能领域的璀璨明珠&#xff0c;正以惊人的速度融入我们的生活。从智能语音助手到智能客服&#xff0c;从机器翻译到内容创作辅助&#xff0c;NLP技术无处不在。然而&#xff0c;如同任何强…...

qt实习总结

创建一个滑动条 QSlider *slider new QSlider(Qt::Vertical); //创建一个垂直方向的 进度条 带有上下箭头的输入框 QSpinBox 提供了一个带有上下箭头的输入框 垂直 水平怎么说 horizontal vetical 布局知识 BtnLayout->addWidget(AmendBtn); BtnLayout->addWidg…...

HTTP的“对话”逻辑:请求与响应如何构建数据桥梁?

一、前言 作为现代互联网通信的基石&#xff0c;HTTP协议定义了客户端与服务器之间的“对话规则”。每一次网页加载、API调用或文件传输的背后&#xff0c;都离不开精心构造的HTTP请求与响应。请求中封装了用户的意图——从请求方法、资源路径到提交的数据&#xff1b;响应则承…...

Docker 镜像标签使用

写在前面 当使用命令 docker pull mysql 拉取镜像时&#xff0c;其实等价于如下命令 docker pull mysql:latest latest 是默认的标签&#xff0c;字面上理解为最新版本的镜像&#xff0c;实质上 latest 只是镜像的标签名称&#xff0c;跟具体某个版本号地位一样&#xff0c;…...

C#异步/多线程编程中Task对象强大的功能介绍。

在 C# 的异步编程中&#xff0c;Task 是一个非常重要的类&#xff0c;它表示一个异步操作。Task 类提供了许多方法&#xff0c;用于管理、控制和组合异步操作。以下是 Task 类中一些常用方法的详细讲解及其功能。 1. Task.Run 功能&#xff1a;将指定的代码块调度到线程池中异步…...

DDD聚合在 ASP.NET Core中的实现

在ASP.NET Core中实现DDD&#xff08;领域驱动设计&#xff0c;Domain-Driven Design&#xff09;聚合通常涉及到几个关键步骤&#xff0c;包括定义领域模型、实现领域服务、使用仓储模式等。以下是如何在ASP.NET Core应用中实现DDD聚合的一些步骤和示例。 1. 定义领域模型 首…...

docker push镜像到阿里云

阿里云账号 阿里云-计算&#xff0c;为了无法计算的价值 开通个人镜像容器 进入控制台&#xff0c;试用容器 实例列表界面 点击上图中的个人&#xff0c;个人版特性 创建个人版&#xff1a; 个人版实例界面&#xff1a; 设置密码 个人版实例&#xff1a; 创建镜像仓库 如上…...

移动通信发展史

概念解释 第一代网络通信 1G 第二代网络通信 2G 第三代网络通信 3G 第四代网络通信 4G 4g网络有很高的速率和很低的延时——高到500M的上传和1G的下载 日常中的4G只是用到了4G技术 运营商 移动-从民企到国企 联通-南方教育口有人 电信 铁通&#xff1a;成立于 2000 年…...

Transformer笔记

Transformer笔记 文章目录 Transformer笔记模型架构核心技术多头注意力机制概念数学概念单头注意力机制代码 基于位置的前馈网络残差连接和层规范化 编码器解码器 特点&#xff1a;Transformer模型完全基于注意力机制&#xff0c;没有任何卷积层或循环神经网络。之前Transforme…...

【学习资源】时间序列数据分析方法(1)

时间序列数据分析是一个有趣的话题&#xff0c;让我们多花一些时间来研究。此篇为第一篇文章。主要介绍特征提取方法、深度学习时序数据分析模型、参考资源。期望能帮助大家解决工业领域的相关问题。 1 特征提取方法&#xff1a;信号处理 (来源:INTELLIGENT FAULT DIAGNOSIS A…...

PHP 文件与目录操作

PHP 学习资料 PHP 学习资料 PHP 学习资料 在 PHP 编程中&#xff0c;文件与目录操作是一项基础且重要的技能。无论是处理用户上传文件、生成日志&#xff0c;还是管理项目中的各类资源&#xff0c;都离不开对文件和目录的操作。PHP 提供了丰富的内置函数&#xff0c;方便开发…...

PostgreSQL认证指南

PostgreSQL 作为一款强大的开源关系型数据库&#xff0c;深受开发者和企业的青睐。获得 PostgreSQL 专家认证&#xff0c;不仅能提升个人在数据库领域的专业能力&#xff0c;还能为职业发展增添有力筹码。下面为大家详细介绍 PostgreSQL 专家认证的学习路径。 一、深入理解基础…...

hive全量迁移脚本

#!/bin/bash #场景&#xff1a;数据在同一库下&#xff0c;并且hive是内部表&#xff08;前缀的hdfs地址是相同的&#xff09;#1.读取一个文件&#xff0c;获取表名#echo "时间$dt_jian_2-------------------------" >> /home/hadoop/qianyi_zengliang/rs.txt#…...