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

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

news 文章来源：https://blog.csdn.net/yyyyyyysc/article/details/143237255 2025/1/15 16:49:56

代码：

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

fdisk - Linux下的磁盘分区利器

文章目录 前言一、安装和启动二、基本命令2.1 查看分区表2.2 删除分区2.3 创建新分区2.4 更改分区类型2.5 其他指令 三、注意事项四、其他相关工具 前言 在Linux系统中&#xff0c;磁盘管理是维护系统性能和数据安全的重要环节。fdisk 是一个强大的命令行工具&#xff0c;专门…...

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

or-tools优化库记录

介绍 Or-tools是谷歌人工智能系列的运筹优化包&#xff0c;是一个用于优化的开源软件套件&#xff0c;针对性地解决车辆路线问题、流程优化、整数和线性规划以及约束规划等问题。 官网地使用说明比我详细&#xff0c;我就不多逼逼了 使用说明网址&#xff1a; https://develo…...

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

M1 Pro MacBook Pro 上的奇遇：Rust 构建失败，SIGKILL 惊魂记

你是否也曾在 M1 Pro MacBook Pro 上遇到过离奇的编译问题&#xff1f;这次我遇到的奇葩问题绝对值得一聊——一个仅在苹果M1 Pro上的神秘构建失败。其他设备都安然无恙&#xff0c;唯独它&#xff01;折腾了一番&#xff0c;终于让我揭开了这“阴谋”的真相。 问题描述 在运…...

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

重构商业生态：DApp创新玩法与盈利模式的深度剖析

随着区块链技术的发展&#xff0c;DApp&#xff08;去中心化应用&#xff09;正在从实验走向成熟。DApp以去中心化、透明性和不可篡改性为基础&#xff0c;结合智能合约&#xff0c;逐步改变传统商业运作模式&#xff0c;创造新的市场生态。本文将从DApp的独特优势、创新玩法和…...

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

2024首届亚洲国际电影节圆满落下帷幕

10月26日下午&#xff0c;2024首届亚洲国际电影节颁奖典礼在中国•澳门隆重举行。在这座充满时尚感的“东亚文化之都”&#xff0c;一座座金鹮奖杯&#xff0c;汇聚起全球电影艺术的荣耀之光&#xff0c;见证着无数电影梦想的傲然绽放。明星云集欢聚一堂&#xff0c;同庆澳门回…...

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

【Mybatis】动态SQL+配置文件+数据库连接池+企业规范（10）

本系列共涉及4个框架&#xff1a;Sping,SpringBoot,Spring MVC,Mybatis。 博客涉及框架的重要知识点&#xff0c;根据序号学习即可。 目录 本系列共涉及4个框架&#xff1a;Sping,SpringBoot,Spring MVC,Mybatis。 博客涉及框架的重要知识点&#xff0c;根据序号学习即可。 …...

编程日记 2024/10/30 1:07:41

layui扩展组件之----右键菜单

源码&#xff1a;rightmenu.js layui.define([element], function (exports) {let element layui.element;const $ layui.jquery;let MOD_NAME rightmenu;let RIGHTMENUMOD function () {this.v 1.0.0;this.author raowenjing;};String.prototype.format function () {…...

编程日记 2024/10/30 1:06:40

ue5实现数字滚动增长

方法1 https://www.bilibili.com/video/BV1h14y197D1/?spm_id_from333.999.0.0 b站教程 重写loop节点 方法二 写在eventtick里...

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

Flink（一）

目录 架构处理有界与无界数据部署应用到任意地方运行任意规模应用利用内存性能 流应用流处理应用的基本组件流状态时间 应用场景事件驱动应用事件驱动应用的优势Flink如何支持事件驱动应用&#xff1f; 典型的事件驱动示例 数据分析应用流式分析应用的优势&#xff1f;Flink 如…...

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

kaggle 数据集下载

文章目录 kaggle 数据集下载&#xff08;1&#xff09; 数据集下载&#xff08;2&#xff09; 手机号验证 kaggle 数据集下载 这两天想学习 kaggle 赛事 把深度学习相关的内容自己给过一遍&#xff0c;快忘得差不多了&#xff0c;惭愧。 参考了好多帖子&#xff0c;使用命令行…...

编程日记 2024/10/30 1:03:36

用服务器ip做网站/郑州seo网站排名

这是【综合类型第 14 篇】&#xff0c;如果觉得有用的话&#xff0c;欢迎关注专栏。 图片详情 分辨率&#xff1a;3840x2160原图大小&#xff1a;1100 KB 点击获取原图 提取码&#xff1a;w4f1 你的问题得到解决了吗&#xff1f;欢迎在评论区留言。 赠人玫瑰&#xff0c;手…...

编程日记 2025/1/15 16:05:54

网站推广预算/网址最全的浏览器

ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法 目录结构 公共模块Common&#xff0c;Home模块&#xff0c;Mobile模块配置Application/Common/Conf/config.php文件 MODULE_ALLOW_LIST > Home,Mobile接下来配置Application/Common/Common/function.php文件 添加…...

编程日记 2025/1/15 14:36:46

网站建设柒首先金手指2/竞价排名适合百度吗

第一次做性能测试&#xff0c;按照操作文档磕磕碰碰的完成了&#xff0c;并且拿到了结果&#xff0c;看到一堆的指标和数据&#xff0c;还是傻眼了&#xff0c;不知道各个指标是什么意思了。 咨询了大牛和度娘&#xff0c;消化理解了一下&#xff0c;不知道是不是正确的。 CPU使…...

编程日记 2025/1/15 7:13:07

wordpress配置qq邮箱/谷歌推广怎么开户

erp5开源制造业erp集群部署指南 1 独立服务器安装mariadb 2 独立服务器安装memcache缓存 3 独立服务器安装zeo 4 1-n台服务器安装zope&#xff08;erp5) 5 独立服务器安装apache代理&#xff0c;对外提供访问url...

编程日记 2025/1/15 6:33:55

浙江台州做网站的公司/百度推广公司

组装 assemble 【题目描述】 数轴上有m个生产车间可以生产零件。一共有n种零件&#xff0c;编号为1~n。第i个车间的坐标为xi&#xff0c;生产第pi种零件&#xff08;1<pi<n&#xff09;。你需要在数轴上的某个位置修建一个组装车间&#xff0c;把这些零件组装起来。为了节…...

编程日记 2025/1/15 4:03:52

河北邯郸网站建设公司/厦门seo厦门起梦

学习Office自动化之前先阅读一些COM书籍&#xff0c;对于理解Office自动化有很大帮助。以下示例代码使用VS2010进行编译。目前市面上已有的关于Office自动化的书籍&#xff0c;多是快餐式的&#xff0c;看过之后只能知道最基本的使用。要想更多的了解&#xff0c;非得MSDN不可。…...

编程日记 2025/1/15 2:20:05