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

前端小技巧之轮播图

news 2025/7/3 7:23:22

文章目录

  • 功能
  • html
  • css
  • javaScript
  • 图片

设置了一点小难度，不理解的话，是不能套用的哦！！！
（下方的圆圈与图片数量不统一，而且宽度是固定的）

下次写一些直接套用的，不整这些麻烦的了

功能

  1. 轮播
  2. 鼠标移入图片后会停止
  3. 鼠标移出图片后会继续进行轮播
  4. 左右两个按钮，可左右滑动
  5. 增加节流锁（防止快速点击左右按钮）
  6. 下方圆圈可快速进入目标图片

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</title><link rel="stylesheet" href="style.css"><script src="js.js" defer></script>
</head>
<body> <div id="main"><ul><li><img src="img/img12.jpeg" alt="亥猪"></li><li><img src="img/img1.jpeg" alt="子鼠"></li><li><img src="img/img2.jpeg" alt="丑牛"></li><li><img src="img/img3.jpeg" alt="寅虎"></li><li><img src="img/img4.jpeg" alt="卯兔"></li><li><img src="img/img5.jpeg" alt="辰龙"></li><li><img src="img/img6.jpeg" alt="巳蛇"></li><li><img src="img/img7.jpeg" alt="午马"></li><li><img src="img/img8.jpeg" alt="未羊"></li><li><img src="img/img9.jpeg" alt="申猴"></li><li><img src="img/img10.jpeg" alt="酉鸡"></li><li><img src="img/img11.jpeg" alt="戌狗"></li><li><img src="img/img12.jpeg" alt="亥猪"></li><li><img src="img/img1.jpeg" alt="子鼠"></li></ul><input type="button" id="left" value="<"><input type="button" id="right" value=">"><!-- 加一个列表 --><ul id = "selectLi"><li class="circle bgc" data-n="1"></li><li class="circle" data-n="4"></li><li class="circle" data-n="7"></li><li class="circle" data-n="10"></li></ul></div>
</body>
</html>

css

* {margin: 0;padding: 0;
}
#main {margin: auto;margin-top: 100px;width: 250px;height: 540px;background-color: aquamarine;overflow: hidden;position: relative;
}
div ul {position: absolute;top: 0px;left: -250px;width: 3500px;transition: 0s ease-in-out;
}
li {float: left;list-style: none;
}
div ul li img {width: 250px;
}
#main #left{width: 20px;height: 40px;z-index: 99;position: absolute;top: 300px;left: 0px;background-color: rgba(255, 255, 255, 0.5);font-size: 20px;line-height: 30px;border: none;
}
#main #right{width: 20px;height: 40px;z-index: 99;float: right;position: absolute;top: 300px;right: 0px;background-color: rgba(255, 255, 255, 0.5);font-size: 20px;line-height: 30px;border: none;
}
#main #selectLi {list-style: none;position: absolute;top: 450px;left: 50%;width: 160px;display: flex;justify-content: space-around;height: 20px;transform: translate(-50%, 0);z-index: 99;
}
#main #selectLi li{border-radius: 50%;height: 30px;width: 30px;text-align: center;cursor: pointer;
}
#main #selectLi .circle{background-color: rgba(255, 255, 255, 0.9);
}
#main #selectLi .bgc{background-color: #e74c3c;opacity: 0.9;
}

javaScript

let leftBtn = document.getElementById("left");
let rightBtn = document.getElementById("right");
let imgList = document.getElementsByTagName('ul')[0];
// 获取主元素
let main = document.getElementById("main");
main.style.height = imgList.style.height;// 图片索引
let index = 1;
rightBtn.addEventListener("click", ()=>{if(!lock) return;index ++;imgList.style.left = index * (-250) + "px";// 增加过渡imgList.style.transition = "0.5s ease-in-out";if(index == 13){index = 1;setTimeout(() =>{imgList.style.left = "-250px";// 取消过渡imgList.style.transition = "none";}, 500)}setCircles();// 关锁lock = false;setTimeout(()=>{lock = true;}, 500)
})
leftBtn.addEventListener("click", ()=>{if(!lock) return;index --;imgList.style.left = index * (-250) + "px";// 增加过渡imgList.style.transition = "0.5s ease-in-out";if(index == 0){index = 12;setTimeout(() =>{imgList.style.left = "-3000px";// 取消过渡imgList.style.transition = "none";}, 500)}setCircles();// 关锁lock = false;setTimeout(()=>{lock = true;}, 500)
})
// 获取小圆点
const circles = document.querySelectorAll(".circle");
// 高亮设置
function setCircles(){for(let i = 0; i < circles.length; i++){if(i === parseInt((index - 1) / 3)){circles[i].classList.add("bgc");}else{circles[i].classList.remove("bgc");}}// circles.forEach((item, index) => {  // 目标和索引// });
}
// 点击切换图片
const oCircle = document.getElementById("selectLi");
oCircle.addEventListener("click", (e)=>{if(e.target.nodeName.toLowerCase() === "li"){// 对应的值const n = Number(e.target.getAttribute("data-n"));index = n;imgList.style.left = index * (-250) + "px";imgList.style.transition = "0.5s ease-in-out";setCircles();}
})
// 函数优化
// 设置节流锁
let lock = true;
// 自动轮播
function handleRightBtn(){if(!lock) return;index ++;imgList.style.left = index * (-250) + "px";// 增加过渡imgList.style.transition = "0.5s ease-in-out";if(index == 13){index = 1;setTimeout(() =>{imgList.style.left = "-250px";// 取消过渡imgList.style.transition = "none";}, 500)}setCircles();// 关锁lock = false;setTimeout(()=>{lock = true;}, 500)
}
let autoPlay = setInterval(handleRightBtn, 1000);
main.onmouseenter = function(){clearInterval(autoPlay);
}
main.onmouseleave = function(){clearInterval(autoPlay);autoPlay = setInterval(handleRightBtn, 1000);
}

图片

相关文章：

前端小技巧之轮播图

文章目录 功能htmlcssjavaScript图片 设置了一点小难度&#xff0c;不理解的话&#xff0c;是不能套用的哦&#xff01;&#xff01;&#xff01; &#xff08;下方的圆圈与图片数量不统一&#xff0c;而且宽度是固定的&#xff09; 下次写一些直接套用的&#xff0c;不整这些麻…...

编程日记 2024/4/15 10:58:59

手动实现简易版RPC(上)

手动实现简易版RPC(上) 前言 什么是RPC&#xff1f;它的原理是什么&#xff1f;它有什么特点&#xff1f;如果让你实现一个RPC框架&#xff0c;你会如何是实现&#xff1f;带着这些问题&#xff0c;开始今天的学习。 本文主要介绍RPC概述以及一些关于RPC的知识&#xff0c;为…...

编程日记 2024/4/15 10:56:57

大语言模型总结整理（不定期更新）

《【快捷部署】016_Ollama&#xff08;CPU only版&#xff09;》 介绍了如何一键快捷部署Ollama&#xff0c;今天就来看一下受欢迎的模型。 模型简介gemmaGemma是由谷歌及其DeepMind团队开发的一个新的开放模型。参数&#xff1a;2B&#xff08;1.6GB&#xff09;、7B&#xff…...

编程日记 2024/4/15 10:52:49

关于npm和yarn的使用（自己的问题记录）

目录 一 npm 和 yarn 的区别 二 npm 和 yarn 常用命令对比 1. 初始化项目 2. 安装所有依赖包 3. 安装某个依赖包 4.安装某个版本的依赖包 5. 更新依赖包 5. 移除依赖包 三 package.json中 devDependencies 和 dependencies 的区别。 四 npm安装包时&#xff0c;…...

编程日记 2024/4/15 10:51:47

Web端Excel的导入导出Demo

&#x1f4da;目录 &#x1f4da;简介:✨代码的构建&#xff1a;&#x1f4ad;Web端接口Excel操作&#x1f680;下载接口&#x1f680;导入读取数据接口 &#x1f3e1;本地Excel文件操作⚡导出数据&#x1f308;导入读取数据 &#x1f4da;简介: 使用阿里巴巴开源组件Easy Exce…...

编程日记 2024/4/15 10:50:46

Java日期正则表达式（附Demo）

目录 前言1. 基本知识2. Demo 前言 对于正则匹配&#xff0c;在项目实战中运用比较广泛 原先写过一版Python相关的&#xff1a;ip和端口号的正则表达式 1. 基本知识 对于日期的正则相对比较简单 以下是一些常见的日期格式及其对应的正则表达式示例&#xff1a; 年-月-日&a…...

编程日记 2024/4/15 10:49:41

基于LabVIEW的CAN通信系统开发案例

基于LabVIEW的CAN通信系统开发案例 介绍了基于LabVIEW开发的CAN通信系统&#xff0c;该系统主要用于汽车行业的数据监控与分析。通过对CAN通信协议的有效应用&#xff0c;实现了车辆控制系统的高效信息交换与实时数据处理&#xff0c;从而提升了车辆性能的检测与优化能力。 项…...

编程日记 2024/4/15 10:44:36

SAP SD学习笔记07 - 紧急发注（急单），现金贩卖，贩卖传票Type/ 明细Category 及其Customize

上面讲SAP中主干流程的时候&#xff0c;还有后面讲一括处理的时候&#xff0c;都用的是 OR 标准受注。 SAP SD学习笔记01 - 简单走一遍SD的流程&#xff1a;受注&#xff0c;出荷&#xff0c;请求_怎么学好sd模块-CSDN博客 下面开始讲一些稀奇古怪的非标准流程。 当然&#x…...

编程日记 2024/4/15 10:42:34

（六）C++自制植物大战僵尸游戏关卡数据讲解

植物大战僵尸游戏开发教程专栏地址http://t.csdnimg.cn/xjvbb 游戏关卡数据文件定义了游戏中每一个关卡的数据&#xff0c;包括游戏类型、关卡通关奖励的金币数量、僵尸出现的波数、每一波出现僵尸数量、每一波僵尸出现的类型等。根据不同的游戏类型&#xff0c;定义了不同的通…...

编程日记 2024/4/15 10:41:32

Java基于微信小程序的校园外卖平台设计与实现，附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

编程日记 2024/4/15 10:40:30

渗透工具及其知识库(个人笔记)

1.IP搜寻 查看kali网段&#xff1a; ip addr 、 ifconfig namp&#xff1a;nmap -sP xxx.xxx.xxx.0/24 netdiscover&#xff1a;netdiscover xxx.xxx.xxx.0/24 arp&#xff1a;arp-scan -l 2.端口扫描 粗略扫描&#xff1a;nmap <IP> 深度扫描&#xff1a; …...

编程日记 2024/4/15 10:39:29

MongoDB的使用

一、Spring Boot集成MongoDB 1 引用依赖包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId></dependency> 2 配置文件配置mongodb资料 # MongoDB连接信息 spring.…...

编程日记 2024/4/15 10:38:27

labview中FP.isFrontmost不生效？

主GUI界面中调用子GUI程序FP.isFrontmost不生效&#xff1f; 如果主GUI程序使用“floating”,子GUI程序使用default动作&#xff0c;则子GUI无法打开到最前。子GUI程序只能使用“模态”才能置顶。 主GUI程序&#xff1a; 子GUI程序&#xff1a; 改正的方法很简单&#xff0c…...

编程日记 2024/4/15 10:36:25

Vela-OS: 记录一个class层，处理MSC协议的bug

一、关于USC-MSC类设备驱动层，处理SCSI指令的代码逻辑问题 1. 源文件 \nuttx\drivers\usbdev\usbmsc_scsi.c 2. 问题描述 对于INQUIRY指令，长度一般是6个字节，cdblen字段嵌入在CBW数据包中，如下： 命令阶段的CBW数据包： 55 53 42 43 60 2a c0 8b 24 00 00 00 0x80 0x…...

编程日记 2024/4/15 10:33:21

跨框架探索：React Redux 和 Vuex 对比分析快速掌握React Redux

React Redux 和 Vuex 都是前端状态管理库&#xff0c;分别用于 React 和 Vue.js 框架。 它们都提供了一套规范的状态管理机制&#xff0c;帮助开发者更好地组织和管理应用状态。下面是它们的一些异同点&#xff1a; 相同点&#xff1a; 中心化状态管理&#xff1a;两者都提…...

编程日记 2024/4/15 10:32:17

第十五届蓝桥杯省赛C/C++大学B组真题及赛后总结

目录 个人总结 C/C 组真题 握手问题 小球反弹 好数 R 格式 宝石组合 数字接龙 爬山 拔河 ​编辑 再总结及后续规划 个人总结 第一次参加蓝桥杯&#xff0c;大二&#xff0c;以前都在在学技术&#xff0c;没有系统的学过算法。所以&#xff0c;还是花了挺多时间去备…...

编程日记 2024/4/15 10:31:14

【Qt踩坑】ARM 编译Qt5.14.2源码-QtWebEngine

1.下载源码 下载网站&#xff1a;Index of /new_archive/qt/5.14/5.14.2/single 2.QWebEngine相关依赖 sudo apt-get install flex libicu-dev libxslt-dev sudo apt-get install libssl-dev libxcursor-dev libxcomposite-dev libxdamage-dev libxrandr-dev sudo apt-get …...

编程日记 2024/4/15 10:30:13

SQL语法 case when语句用法讲解

CASE WHEN解释 &#xff1a; SQL中的CASE WHEN语句是一种条件表达式&#xff0c;它允许你根据不同的情况返回不同的值。CASE WHEN通常用于SELECT语句中&#xff0c;用于创建新的列&#xff0c;该列的值取决于其他列的值。CASE WHEN可以用于任何可以使用表达式的地方。 大致概…...

编程日记 2024/4/15 10:28:11

Project Euler_Problem 193_Few Repeated Digits_欧拉筛+容斥公式

解题思路&#xff1a;暴力搜索 代码&#xff1a; void solve() {ll i, j,k,x,y,z,p,q,u,v,l,l1;N 999966663333, NN 1024;//N 1000;double a, b, c,d;M.NT.get_prime_Euler(1000000);l M.NT.pcnt;for (i 1; i < l; i) {u M.NT.prime[i];v M.NT.prime[i 1];x u * …...

编程日记 2024/4/15 10:25:06

排序算法-基数排序

基数排序是一种非比较排序算法&#xff0c;它将待排序的数字按照位数进行排序。基数排序的思想是先按照个位数进行排序&#xff0c;然后按照十位数进行排序&#xff0c;接着按照百位数进行排序&#xff0c;以此类推&#xff0c;直到最高位排序完成。 基数排序的步骤如下&#x…...

编程日记 2024/4/15 10:24:05

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/6/15 8:06:37

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/6/28 4:20:48

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2025/7/3 1:07:37

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/7/2 3:01:56

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/6/21 9:41:59

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/7/3 3:02:42

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/6/16 20:22:52

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/6/24 6:22:14

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/6/19 3:49:44