JS轮播图实现自动轮播、悬浮停止轮播、点击切换，下方指示器与图片联动效果
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.context{width: 600px;margin: 0 auto;text-align: center;}.context img{width: 600px;height: 300px;}.container{position: relative;}.yuan{width: 50px;height: 50px;position: absolute;right: 0;top: 43%;line-height: 46px;font-size: 28px;font-weight: bold;background-color: white;border: 1px solid black;border-radius: 50px;color: black;opacity: 0.5;display: none;cursor: pointer;}.leftyuan{width: 50px;height: 50px;position: absolute;left: 0;top: 43%;line-height: 46px;font-size: 28px;font-weight: bold;background-color: white;border: 1px solid black;border-radius: 50px;color: black;opacity: 0.5;display: none;cursor: pointer;}ul li{list-style: none;float: left;margin: 0 10px;width: 35px;height: 30px;line-height: 30px;background-color: #eeeeee;cursor: pointer;}ul{position: absolute;bottom: 0;left: 21%;}li:hover{background-color: #fea500}.orange{background-color: #fea500;}</style>
</head>
<body><div class="context"> <div class="container"><img src="./image/1.jpg" alt=""><div class="yuan">></div><div class="leftyuan"><</div><ul><li class="orange">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><!-- <button>上一张</button><button>下一张</button> --></div><script>let btns = document.querySelectorAll('button')let simg = document.querySelector('img')let container = document.querySelector('.container')let yuan = document.querySelector('.yuan')let leftyuan = document.querySelector('.leftyuan')let li = document.querySelectorAll('ul li')let b=0li.forEach(item=>{item.onclick=function(){simg.src=`./image/${item.innerText}.jpg`jx(item.innerText)}})// 控制图片变化变量let d1=setInterval(djq,1000)function djq(){// clearInterval(d1)if(b==5){b=0}simg.src=`./image/${++b}.jpg`li.forEach(item=>{item.classList.remove('orange')if(b==item.innerHTML){item.classList.add('orange')}})if(b==5){b=0}}function jx(c){b=cclearInterval(d1)simg.src=`./image/${b}.jpg`li.forEach(item=>{item.classList.remove('orange')if(b==item.innerHTML){item.classList.add('orange')}})if(b==5){b=0}}yuan.onclick=function(){if(b>=5){b=0}simg.src=`./image/${++b}.jpg`li.forEach(item=>{item.classList.remove('orange')if(b==item.innerHTML){item.classList.add('orange')}})}leftyuan.onclick=function(){if(b<=1){b=6}simg.src=`./image/${--b}.jpg`li.forEach(item=>{item.classList.remove('orange')if(b==item.innerHTML){item.classList.add('orange')}})}container.onmouseenter= function(){clearInterval(d1)yuan.style.display='block'leftyuan.style.display='block'}container.onmouseleave= function(){// console.log('b');d1 =setInterval(djq,1000)yuan.style.display='none'leftyuan.style.display='none'}// btns[0].onclick=function(){// if(b<=1){// b=6// }// simg.src=`./image/${--b}.jpg`// }// btns[1].onclick=function(){// if(b>=5){// b=0// }// simg.src=`./image/${++b}.jpg`// }</script>
</body>
</html>效果图：
注：需要自己找5张图片下载到image文件夹下，并且把图片名字改成1到5哦
如下图所示：
相关文章：
JS轮播图实现自动轮播、悬浮停止轮播、点击切换，下方指示器与图片联动效果
代码： <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><s…...
使用 Kafka 和 MinIO 实现人工智能数据工作流
MinIO Enterprise Object Store 是用于创建和执行复杂数据工作流的基础组件。此事件驱动功能的核心是使用 Kafka 的 MinIO 存储桶通知。MinIO Enterprise Object Store 为所有 HTTP 请求（如 PUT、POST、COPY、DELETE、GET、HEAD 和 CompleteMultipartUpload…...
力扣题86~90
题86（中等）： python代码 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def partition(self, head: Optional[Li…...
【JavaEE】【多线程】定时器
目录 一、定时器简介1.1 Timer类1.2 使用案例 二、实现简易定时器2.1 MyTimerTask类2.2 实现schedule方法2.3 构造方法2.4 总代码2.5 测试 一、定时器简介 定时器：就相当于一个闹钟，当我们定的时间到了，那么就执行一些逻辑。 1.1 Timer类 …...
CI/CD 的原理
一、CI/CD 的概念 CI/CD是一种软件开发流程，旨在通过自动化和持续的集成、测试和交付实现高质量的软件产品。 CI(Continuous Integration)持续集成 目前主流的开发方式是协同开发，即多位开发人员同事处理同意应用不同模块或功能。 如果企业在同一时间将…...
进一步认识ICMP协议
在日常工作中，我们经常需要判断网络是否连通，相信大家使用较多的命令就是 ping啦。ping命令是基于 ICMP 协议来实现的，那么什么是 ICMP 协议呢？ping命令又是如何基于 ICMP 实现的呢？ 今天这篇文章，我们就来…...
NUUO网络视频录像机upload.php任意文件上传漏洞复现
文章目录 免责声明漏洞描述搜索语法漏洞复现nuclei修复建议 免责声明 本文章仅供学习与交流，请勿用于非法用途，均由使用者本人负责，文章作者不为此承担任何责任 漏洞描述 NUUO网络视频录像机（Network Video Recorder࿰…...
WebGL 3D基础
1. 归一化函数 对一个向量进行归一化处理，即调整向量的模长（长度）为1，同时保持其方向不变。 // 归一化函数 function normalized(arr) {let sum 0;for (let i 0; i < arr.length; i) {sum arr[i] * arr[i];}const middle …...
Docker 部署MongoDb
1. 编写docker-compose.conf 文件 version: 3 services:mongo:image: mongo:latest # 指定 MongoDB 版本，确保 > 3.6container_name: mongo-replicarestart: alwayscommand: ["mongod", "--replSet", "rs0", "--oplogSize&…...
【Hadoop】hadoop的路径分不清？HDFS路径与本地文件系统路径的区别
/usr/local/hadoop /user/hadoop /home/hadoop/ 这里有些路径名很相似，帮我区分？ 在Hadoop生态系统中，理解文件存储的位置对于有效管理数据至关重要。Hadoop分布式文件系统（HDFS）提供了一个高度可靠的存储系统…...
倪师学习笔记-天纪-易经八卦
一、简介 卦代表事情，爻代表时机，三爻为一卦八卦对应的天相，六十四卦对应人间事 二、八卦性 1、乾 天父亲向下看，无所求，雄心万丈始终如一，贞，坚心，专心至刚，天威&am…...
自动驾驶性能分析时，非常有用的两个信息
自动驾驶的关键路径如下，传感器的数据发送给感知模块；感知模块根据传感器数据来确定车辆所处的环境，比如前方有没有障碍物，是不是和车道线保持着适当的距离等；感知处理之后的数据传递给规控模块，规控根据车…...
数据结构 - 并查集
文章目录 一、并查集原理二、并查集实现三、并查集的应用 一、并查集原理 在一些应用问题中，需要将n个不同的元素划分成一些不相交的集合。开始时，每个元素自成一个单元素集合，然后按一定的规律将归于同一组元素的集合合并。在此过程中要反复…...
canvas基础+应用+实例
文章目录 Canvas基础知识要点一、基本概念二、常用参数三、实例四、场景应用说明完结 Canvas基础知识要点 一、基本概念 Canvas是HTML5中的一个标签，用于在网页上通过JavaScript绘制图形、动画等。它提供了一个空白的、基于像素的绘图区域，就像一块画布…...
Linux命令 用户操作简介
目录 1. 添加新的用户账号 2. 删除用户账号 3. 修改用户账号 4. 用户口令的管理 示例汇总 添加新用户 删除用户 修改用户信息 更改用户口令 在 Linux 系统中，用户管理是一项重要的任务，包括添加新用户、删除用户、修改用户信息以及管理用户口令…...
大语言模型的Scaling Law【Power Low】
NLP-大语言模型学习系列目录 一、注意力机制基础——RNN,Seq2Seq等基础知识 二、注意力机制【Self-Attention,自注意力模型】 三、Transformer图文详解【Attention is all you need】 四、大语言模型的Scaling Law【Power Low】 文章目录 NLP-大语言模型学习系列目录一、什么是…...
windows环境下，使用docker搭建redis集群
参考： https://blog.csdn.net/weixin_46594796/article/details/137864842 https://www.cnblogs.com/niceyoo/p/14118146.html 史上最详细Docker搭建Redis Cluster集群环境 值得收藏 每步都有图，不用担心学不会-腾讯云开发者社区-腾讯云 一、基础环境描述 宿主机：192.168…...
Python(pandas库3)
函数 随机抽样 语法： n：要抽取的行数 frac：抽取的比例，比如 frac0.5，代表抽取总体数据的50% axis：示在哪个方向上抽取数据(axis1 表示列/axis0 表示行) 案例： 输出结果都为随机抽取。 空…...
WPF+MVVM案例实战（十）- 水波纹按钮实现与控件封装
文章目录 1、运行效果1、封装用户控件1、创建文件2、依赖属性实现2、使用封装的按钮控件1.主界面引用2.按钮属性设置3 总结1、运行效果 1、封装用户控件 1、创建文件 打开 Wpf_Examples 项目，在 UserControlLib 用户控件库中创建按钮文件 WaterRipplesButton.xaml ，修改 Us…...
数据结构————map,set详解
今天带来map和set的详解，保证大家分清楚 一，概念 map和set是一种专门用来搜索的容器或数据结构 map能存储两个数据类型，我们称之为<key-value>模型 set只能存储一个数据类型，我们称之为纯<key>模型 它们的效率都非…...
工业安全零事故的智能守护者：一体化AI智能安防平台
前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
数据链路层的主要功能是什么
数据链路层（OSI模型第2层）的核心功能是在相邻网络节点（如交换机、主机）间提供可靠的数据帧传输服务，主要职责包括： 🔑 核心功能详解： 帧封装与解封装 封装： 将网络层下发…...
如何为服务器生成TLS证书
TLS（Transport Layer Security）证书是确保网络通信安全的重要手段，它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书，可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
为什么要创建 Vue 实例
核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...