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

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

news 2025/7/7 16:55:17

代码：

<!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轮播图实现自动轮播、悬浮停止轮播、点击切换，下方指示器与图片联动效果

代码&#xff1a; <!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 请求&#xff08;如 PUT、POST、COPY、DELETE、GET、HEAD 和 CompleteMultipartUpload&#xf…...

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

力扣题86~90

题86&#xff08;中等&#xff09;&#xff1a; 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 测试 一、定时器简介 定时器&#xff1a;就相当于一个闹钟&#xff0c;当我们定的时间到了&#xff0c;那么就执行一些逻辑。 1.1 Timer类 …...

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

CI/CD 的原理

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

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

进一步认识ICMP协议

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

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

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

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

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

WebGL 3D基础

1. 归一化函数 对一个向量进行归一化处理&#xff0c;即调整向量的模长&#xff08;长度&#xff09;为1&#xff0c;同时保持其方向不变。 // 归一化函数 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 版本&#xff0c;确保 > 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/ 这里有些路径名很相似&#xff0c;帮我区分&#xff1f; 在Hadoop生态系统中&#xff0c;理解文件存储的位置对于有效管理数据至关重要。Hadoop分布式文件系统&#xff08;HDFS&#xff09;提供了一个高度可靠的存储系统&#xf…...

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

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

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

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

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

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

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

数据结构 - 并查集

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

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

canvas基础+应用+实例

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

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

Linux命令 用户操作简介

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

编程日记 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)

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

编程日记 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的详解&#xff0c;保证大家分清楚 一&#xff0c;概念 map和set是一种专门用来搜索的容器或数据结构 map能存储两个数据类型&#xff0c;我们称之为<key-value>模型 set只能存储一个数据类型&#xff0c;我们称之为纯<key>模型 它们的效率都非…...

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

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/6/25 3:04:08

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/7/6 15:09:10

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/7/5 23:15:27

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/6/21 2:45:17

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/7/4 0:33:02

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2025/7/6 19:16:54

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2025/7/2 14:43:09

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...

编程新知 2025/7/5 18:20:18

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2025/7/7 16:10:51

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2025/7/7 8:15:22