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

JS轮播图实现自动轮播、悬浮停止轮播、点击切换，下方指示器与图片联动效果

news 2026/5/12 15:39:19

代码：

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

编程日记 2024/10/30 1:49:31

使用 Kafka 和 MinIO 实现人工智能数据工作流

MinIO Enterprise Object Store 是用于创建和执行复杂数据工作流的基础组件。此事件驱动功能的核心是使用 Kafka 的 MinIO 存储桶通知。MinIO Enterprise Object Store 为所有 HTTP 请求（如 PUT、POST、COPY、DELETE、GET、HEAD 和 CompleteMultipartUpload&#xf…...

编程日记 2024/10/30 1:48:30

力扣题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…...

编程日记 2024/10/30 1:47:28

【JavaEE】【多线程】定时器

目录一、定时器简介1.1 Timer类1.2 使用案例二、实现简易定时器2.1 MyTimerTask类2.2 实现schedule方法2.3 构造方法2.4 总代码2.5 测试一、定时器简介定时器：就相当于一个闹钟，当我们定的时间到了，那么就执行一些逻辑。 1.1 Timer类 …...

编程日记 2024/10/30 1:46:27

CI/CD 的原理

一、CI/CD 的概念 CI/CD是一种软件开发流程，旨在通过自动化和持续的集成、测试和交付实现高质量的软件产品。 CI(Continuous Integration)持续集成目前主流的开发方式是协同开发，即多位开发人员同事处理同意应用不同模块或功能。如果企业在同一时间将…...

编程日记 2024/10/30 1:45:26

进一步认识ICMP协议

在日常工作中，我们经常需要判断网络是否连通，相信大家使用较多的命令就是 ping啦。ping命令是基于 ICMP 协议来实现的，那么什么是 ICMP 协议呢？ping命令又是如何基于 ICMP 实现的呢？ 今天这篇文章，我们就来…...

编程日记 2024/10/30 1:42:22

NUUO网络视频录像机upload.php任意文件上传漏洞复现

文章目录免责声明漏洞描述搜索语法漏洞复现nuclei修复建议免责声明本文章仅供学习与交流，请勿用于非法用途，均由使用者本人负责，文章作者不为此承担任何责任漏洞描述 NUUO网络视频录像机（Network Video Recorder&#xff0…...

编程日记 2024/10/30 1:39:18

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 …...

编程日记 2024/10/30 1:35:11

Docker 部署MongoDb

1. 编写docker-compose.conf 文件 version: 3 services:mongo:image: mongo:latest # 指定 MongoDB 版本，确保 > 3.6container_name: mongo-replicarestart: alwayscommand: ["mongod", "--replSet", "rs0", "--oplogSize&…...

编程日记 2024/10/30 1:34:10

【Hadoop】hadoop的路径分不清？HDFS路径与本地文件系统路径的区别

/usr/local/hadoop /user/hadoop /home/hadoop/ 这里有些路径名很相似，帮我区分？ 在Hadoop生态系统中，理解文件存储的位置对于有效管理数据至关重要。Hadoop分布式文件系统（HDFS）提供了一个高度可靠的存储系统&#xf…...

编程日记 2024/10/30 1:33:09

倪师学习笔记-天纪-易经八卦

一、简介卦代表事情，爻代表时机，三爻为一卦八卦对应的天相，六十四卦对应人间事二、八卦性 1、乾天父亲向下看，无所求，雄心万丈始终如一，贞，坚心，专心至刚，天威&am…...

编程日记 2024/10/30 1:29:04

自动驾驶性能分析时，非常有用的两个信息

自动驾驶的关键路径如下，传感器的数据发送给感知模块；感知模块根据传感器数据来确定车辆所处的环境，比如前方有没有障碍物，是不是和车道线保持着适当的距离等；感知处理之后的数据传递给规控模块，规控根据车…...

编程日记 2024/10/30 1:28:02

数据结构 - 并查集

文章目录一、并查集原理二、并查集实现三、并查集的应用一、并查集原理在一些应用问题中，需要将n个不同的元素划分成一些不相交的集合。开始时，每个元素自成一个单元素集合，然后按一定的规律将归于同一组元素的集合合并。在此过程中要反复…...

编程日记 2024/10/30 1:27:00

canvas基础+应用+实例

文章目录 Canvas基础知识要点一、基本概念二、常用参数三、实例四、场景应用说明完结 Canvas基础知识要点一、基本概念 Canvas是HTML5中的一个标签，用于在网页上通过JavaScript绘制图形、动画等。它提供了一个空白的、基于像素的绘图区域，就像一块画布…...

编程日记 2024/10/30 1:25:59

Linux命令用户操作简介

目录 1. 添加新的用户账号 2. 删除用户账号 3. 修改用户账号 4. 用户口令的管理示例汇总添加新用户删除用户修改用户信息更改用户口令在 Linux 系统中，用户管理是一项重要的任务，包括添加新用户、删除用户、修改用户信息以及管理用户口令…...

编程日记 2024/10/30 1:24:58

大语言模型的Scaling Law【Power Low】

NLP-大语言模型学习系列目录一、注意力机制基础——RNN,Seq2Seq等基础知识二、注意力机制【Self-Attention,自注意力模型】三、Transformer图文详解【Attention is all you need】四、大语言模型的Scaling Law【Power Low】文章目录 NLP-大语言模型学习系列目录一、什么是…...

编程日记 2024/10/30 1:23:57

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…...

编程日记 2024/10/30 1:22:56

Python(pandas库3)

函数随机抽样语法： n：要抽取的行数 frac：抽取的比例，比如 frac0.5，代表抽取总体数据的50% axis：示在哪个方向上抽取数据(axis1 表示列/axis0 表示行) 案例： 输出结果都为随机抽取。空…...

编程日记 2024/10/30 1:19:54

WPF+MVVM案例实战（十）- 水波纹按钮实现与控件封装

文章目录 1、运行效果1、封装用户控件1、创建文件2、依赖属性实现2、使用封装的按钮控件1.主界面引用2.按钮属性设置3 总结1、运行效果 1、封装用户控件 1、创建文件打开 Wpf_Examples 项目，在 UserControlLib 用户控件库中创建按钮文件 WaterRipplesButton.xaml ，修改 Us…...

编程日记 2024/10/30 1:16:51

数据结构————map,set详解

今天带来map和set的详解，保证大家分清楚一，概念 map和set是一种专门用来搜索的容器或数据结构 map能存储两个数据类型，我们称之为<key-value>模型 set只能存储一个数据类型，我们称之为纯<key>模型它们的效率都非…...

编程日记 2024/10/30 1:15:50

半导体产业3000亿美元背后的冷思考：成本高墙、利润悖论与创新挑战

1. 行业现状：跨越3000亿美元门槛后的冷思考又到了一年一度回顾过去、展望未来的时刻。对于我们这些在半导体行业摸爬滚打了十几年甚至几十年的老工程师来说，每年的这个时候心情总是复杂的。今年有个标志性的消息：全球半导体产业营收终于再次…...

编程新知 2026/5/12 15:35:29

Perplexity学术模式到底有多“实时”？我们用NIST标准测试集连续监控72小时，结果让3所常春藤图书馆紧急更新采购清单…

更多请点击： https://intelliparadigm.com 第一章：Perplexity学术模式到底有多“实时”？我们用NIST标准测试集连续监控72小时，结果让3所常春藤图书馆紧急更新采购清单… 实时性验证方法论我们采用 NIST TREC 2023 Dynamic Filt…...

编程新知 2026/5/12 15:22:51

超长上下文处理能力翻倍，响应速度提升47%，API成本下降22%：Claude 3.5 Sonnet新功能落地实战手册，仅限本周内有效

更多请点击： https://intelliparadigm.com 第一章：Claude 3.5 Sonnet新功能概览与核心突破 Anthropic 正式发布的 Claude 3.5 Sonnet 在推理效率、多模态理解边界与开发者集成体验上实现了显著跃迁。相比前代，其上下文窗口稳定支持 200K tok…...

编程新知 2026/5/12 13:52:31

免费开源！3分钟让Mac鼠标滚动告别卡顿的终极平滑方案

免费开源！3分钟让Mac鼠标滚动告别卡顿的终极平滑方案【免费下载链接】Mos 一个用于在 macOS 上平滑你的鼠标滚动效果或单独设置滚动方向的小工具, 让你的滚轮爽如触控板 | A lightweight tool used to smooth scrolling and set scroll direction independently fo…...

编程新知 2026/5/12 12:53:11

MooseFS企业级部署方案：多数据中心架构设计与实施指南【免费下载链接】moosefs MooseFS Distributed Storage – Open Source, Petabyte, Fault-Tolerant, Highly Performing, Scalable Network Distributed File System / Software-Defined Storage 项目地址: h…...

编程新知 2026/5/12 11:31:36

别再复制粘贴了！用LabVIEW 2023实现TCP/IP通讯的保姆级教程（附完整DEMO下载）

LabVIEW 2023 TCP/IP通讯实战：从原理到健壮性设计的深度解析在工业自动化与测试测量领域，稳定可靠的通讯系统如同设备的神经系统。许多LabVIEW开发者虽然能够通过复制粘贴完成基础通讯功能，却在真实项目中频繁遭遇数据丢失、连接不稳定等&qu…...

编程新知 2026/5/12 10:48:16

别让答辩 PPT 拖垮你的毕业季！PaperXie AI 帮你把论文成果 “说清楚”

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能排版/文献综述/AI PPThttps://www.paperxie.cn/ppt/createhttps://www.paperxie.cn/ppt/create 论文查重过了、导师意见改完了，你以为毕业的最后一关只剩答辩？可打开 PPT 的瞬间，很多人…...

编程新知 2026/5/12 10:09:34

无需写代码！用 PackSoft 做数字展厅大屏

前言做过展厅项目的朋友都懂这种痛—— 客户参观来了，讲解员打开浏览器，地址栏、书签栏、收藏夹全暴露在屏幕上，旁边还挂着一个没关的 QQ 弹窗……高端大气的数字展厅，体验瞬间拉低一个档次。更麻烦的是：大屏全屏…...

编程新知 2026/5/12 10:06:53

从零构建开源语音AI交互中枢：EchoKit Server部署与调优指南

1. 项目概述：构建你自己的语音AI交互中枢如果你对智能音箱、语音助手这类设备感兴趣，但又觉得市面上的产品要么功能封闭，要么隐私堪忧，那么今天聊的这个项目——EchoKit Server，可能会让你眼前一亮。简单来说&#x…...

编程新知 2026/5/12 9:04:28

从‘幂的末尾’到RSA加密：一个模运算技巧如何贯穿编程竞赛与网络安全？

从竞赛编程到网络安全：模运算的双面人生第一次在OpenJudge上遇到"幂的末尾"这道题时，我盯着屏幕上的数字发愣——计算a^b的最后三位数，这不就是求a^b模1000的结果吗？当时的我并不知道，这个看似简单的数学技…...

编程新知 2026/5/12 7:37:30

注：需要自己找5张图片下载到image文件夹下，并且把图片名字改成1到5哦

相关文章：