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

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

news 2026/3/28 8:05:47

代码：

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

PyTorch 2.5快速部署指南：3步开启你的AI模型训练之旅

PyTorch 2.5快速部署指南&#xff1a;3步开启你的AI模型训练之旅 1. PyTorch 2.5环境准备 PyTorch 2.5作为当前最流行的深度学习框架之一&#xff0c;带来了多项性能优化和新特性。在开始之前&#xff0c;我们需要确保环境配置正确。 1.1 系统要求检查 操作系统&#xff1a…...

编程新知 2026/3/28 7:29:15

OWL ADVENTURE Java面试题实战：手写一个简单的图像加载器

OWL ADVENTURE Java面试题实战&#xff1a;手写一个简单的图像加载器 最近在准备Java面试的朋友&#xff0c;是不是经常被问到IO、多线程这些基础&#xff1f;光背八股文总觉得心里没底。今天咱们换个玩法&#xff0c;不搞虚的&#xff0c;直接动手写一个能用在真实项目里的东…...

编程新知 2026/3/28 6:56:53

【Python内存管理终极指南】：20年专家亲授智能体内存优化的5大架构设计图与3个致命误区

第一章&#xff1a;Python智能体内存管理的核心原理与演进脉络 Python的内存管理并非由开发者手动控制&#xff0c;而是由解释器内置的“智能体”协同完成——它融合了引用计数、循环垃圾回收&#xff08;GC&#xff09;和内存池机制三重策略&#xff0c;在运行时动态权衡效率与…...

编程新知 2026/3/28 6:24:37

AgentCPM深度研报助手C语言文件操作实战：批量处理本地研报文本文件

AgentCPM深度研报助手C语言文件操作实战&#xff1a;批量处理本地研报文本文件 你是不是也遇到过这样的场景&#xff1f;手头有一堆下载好的行业研报&#xff0c;有PDF&#xff0c;有TXT&#xff0c;堆在文件夹里。想快速了解每份报告的核心观点&#xff0c;但一份份打开看&am…...

编程新知 2026/3/28 5:46:08

次元画室快速部署教程：手把手解决网络权限与配置问题

次元画室快速部署教程&#xff1a;手把手解决网络权限与配置问题 1. 环境准备与快速部署 1.1 系统要求检查 在开始部署次元画室前&#xff0c;请确保您的系统满足以下最低要求&#xff1a; 操作系统&#xff1a;Ubuntu 20.04/22.04 LTS 或 CentOS 8/9&#xff08;推荐使用Ub…...

编程新知 2026/3/28 5:28:04

如何用Python零依赖快速获取百度搜索结果？python-baidusearch深度解析

如何用Python零依赖快速获取百度搜索结果&#xff1f;python-baidusearch深度解析 【免费下载链接】python-baidusearch 自己手写的百度搜索接口的封装&#xff0c;pip安装&#xff0c;支持命令行执行。Baidu Search unofficial API for Python with no external dependencies …...

编程新知 2026/3/28 4:40:02

Abaqus数值模拟案例研究：随机纤维分布二维RVE模型中的微观横向拉伸损伤与延性损伤评估

abaqus数值模拟案例系列-随机纤维分布二维RVE模型微观横向拉伸损伤&#xff0c;设置了周期边界&#xff0c;采用Drucker-Prager&#xff08;dp&#xff09;准则&#xff0c;Ductile-Damage延性损伤&#xff0c;界面采用cohesive单元&#xff0c;采用牵引分离方法&#xff0c;Qu…...

编程新知 2026/3/28 2:45:06

别再只会setValue了！Qt进度条QProgressBar/QProgressDialog的5个实战技巧与避坑指南

别再只会setValue了&#xff01;Qt进度条QProgressBar/QProgressDialog的5个实战技巧与避坑指南 在开发文件管理器、下载工具或数据处理软件时&#xff0c;进度条往往是用户最直观的体验指标之一。一个"聪明"的进度条不仅能准确反映任务状态&#xff0c;还能提升用户…...

编程新知 2026/3/28 2:39:05

手把手教你用LVGL特殊符号打造炫酷UI界面

手把手教你用LVGL特殊符号打造炫酷UI界面 在嵌入式设备开发中&#xff0c;UI设计往往面临资源受限的挑战。LVGL&#xff08;Light and Versatile Graphics Library&#xff09;作为一款轻量级开源图形库&#xff0c;通过其丰富的特殊符号系统&#xff0c;让开发者能够在有限资…...

编程新知 2026/3/28 2:00:19

GIS开发必备：5分钟搞定EPSG3857转WGS84坐标转换（附proj4.js完整代码）

GIS开发实战&#xff1a;从原理到代码实现EPSG3857与WGS84的高效坐标转换 刚接触WebGIS开发的工程师们&#xff0c;常常会被各种坐标系搞得晕头转向。为什么高德地图上显示的位置和GPS设备采集的数据对不上&#xff1f;为什么Leaflet、OpenLayers这些库加载的瓦片地图坐标数值大…...

编程新知 2026/3/28 0:11:21