前端小技巧之轮播图
文章目录
- 功能
- html
- css
- javaScript
- 图片
设置了一点小难度,不理解的话,是不能套用的哦!!!
(下方的圆圈与图片数量不统一,而且宽度是固定的)
下次写一些直接套用的,不整这些麻烦的了
功能
- 轮播
- 鼠标移入图片后会停止
- 鼠标移出图片后会继续进行轮播
- 左右两个按钮,可左右滑动
- 增加节流锁(防止快速点击左右按钮)
- 下方圆圈可快速进入目标图片
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图片 设置了一点小难度,不理解的话,是不能套用的哦!!! (下方的圆圈与图片数量不统一,而且宽度是固定的) 下次写一些直接套用的,不整这些麻…...
手动实现简易版RPC(上)
手动实现简易版RPC(上) 前言 什么是RPC?它的原理是什么?它有什么特点?如果让你实现一个RPC框架,你会如何是实现?带着这些问题,开始今天的学习。 本文主要介绍RPC概述以及一些关于RPC的知识,为…...
大语言模型总结整理(不定期更新)
《【快捷部署】016_Ollama(CPU only版)》 介绍了如何一键快捷部署Ollama,今天就来看一下受欢迎的模型。 模型简介gemmaGemma是由谷歌及其DeepMind团队开发的一个新的开放模型。参数:2B(1.6GB)、7Bÿ…...
关于npm和yarn的使用(自己的问题记录)
目录 一 npm 和 yarn 的区别 二 npm 和 yarn 常用命令对比 1. 初始化项目 2. 安装所有依赖包 3. 安装某个依赖包 4.安装某个版本的依赖包 5. 更新依赖包 5. 移除依赖包 三 package.json中 devDependencies 和 dependencies 的区别。 四 npm安装包时,…...
Web端Excel的导入导出Demo
📚目录 📚简介:✨代码的构建:💭Web端接口Excel操作🚀下载接口🚀导入读取数据接口 🏡本地Excel文件操作⚡导出数据🌈导入读取数据 📚简介: 使用阿里巴巴开源组件Easy Exce…...
Java日期正则表达式(附Demo)
目录 前言1. 基本知识2. Demo 前言 对于正则匹配,在项目实战中运用比较广泛 原先写过一版Python相关的:ip和端口号的正则表达式 1. 基本知识 对于日期的正则相对比较简单 以下是一些常见的日期格式及其对应的正则表达式示例: 年-月-日&a…...
基于LabVIEW的CAN通信系统开发案例
基于LabVIEW的CAN通信系统开发案例 介绍了基于LabVIEW开发的CAN通信系统,该系统主要用于汽车行业的数据监控与分析。通过对CAN通信协议的有效应用,实现了车辆控制系统的高效信息交换与实时数据处理,从而提升了车辆性能的检测与优化能力。 项…...
SAP SD学习笔记07 - 紧急发注(急单),现金贩卖,贩卖传票Type/ 明细Category 及其Customize
上面讲SAP中主干流程的时候,还有后面讲一括处理的时候,都用的是 OR 标准受注。 SAP SD学习笔记01 - 简单走一遍SD的流程:受注,出荷,请求_怎么学好sd模块-CSDN博客 下面开始讲一些稀奇古怪的非标准流程。 当然&#x…...
(六)C++自制植物大战僵尸游戏关卡数据讲解
植物大战僵尸游戏开发教程专栏地址http://t.csdnimg.cn/xjvbb 游戏关卡数据文件定义了游戏中每一个关卡的数据,包括游戏类型、关卡通关奖励的金币数量、僵尸出现的波数、每一波出现僵尸数量、每一波僵尸出现的类型等。根据不同的游戏类型,定义了不同的通…...
Java基于微信小程序的校园外卖平台设计与实现,附源码
博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…...
渗透工具及其知识库(个人笔记)
1.IP搜寻 查看kali网段: ip addr 、 ifconfig namp:nmap -sP xxx.xxx.xxx.0/24 netdiscover:netdiscover xxx.xxx.xxx.0/24 arp:arp-scan -l 2.端口扫描 粗略扫描:nmap <IP> 深度扫描: …...
MongoDB的使用
一、Spring Boot集成MongoDB 1 引用依赖包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId></dependency> 2 配置文件配置mongodb资料 # MongoDB连接信息 spring.…...
labview中FP.isFrontmost不生效?
主GUI界面中调用子GUI程序FP.isFrontmost不生效? 如果主GUI程序使用“floating”,子GUI程序使用default动作,则子GUI无法打开到最前。子GUI程序只能使用“模态”才能置顶。 主GUI程序: 子GUI程序: 改正的方法很简单,…...
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…...
跨框架探索:React Redux 和 Vuex 对比分析快速掌握React Redux
React Redux 和 Vuex 都是前端状态管理库,分别用于 React 和 Vue.js 框架。 它们都提供了一套规范的状态管理机制,帮助开发者更好地组织和管理应用状态。下面是它们的一些异同点: 相同点: 中心化状态管理:两者都提…...
第十五届蓝桥杯省赛C/C++大学B组真题及赛后总结
目录 个人总结 C/C 组真题 握手问题 小球反弹 好数 R 格式 宝石组合 数字接龙 爬山 拔河 编辑 再总结及后续规划 个人总结 第一次参加蓝桥杯,大二,以前都在在学技术,没有系统的学过算法。所以,还是花了挺多时间去备…...
【Qt踩坑】ARM 编译Qt5.14.2源码-QtWebEngine
1.下载源码 下载网站: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 …...
SQL语法 case when语句用法讲解
CASE WHEN解释 : SQL中的CASE WHEN语句是一种条件表达式,它允许你根据不同的情况返回不同的值。CASE WHEN通常用于SELECT语句中,用于创建新的列,该列的值取决于其他列的值。CASE WHEN可以用于任何可以使用表达式的地方。 大致概…...
Project Euler_Problem 193_Few Repeated Digits_欧拉筛+容斥公式
解题思路:暴力搜索 代码: 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 * …...
排序算法-基数排序
基数排序是一种非比较排序算法,它将待排序的数字按照位数进行排序。基数排序的思想是先按照个位数进行排序,然后按照十位数进行排序,接着按照百位数进行排序,以此类推,直到最高位排序完成。 基数排序的步骤如下&#x…...
ChatGPT在线网页版
ChatGPT镜像 今天在知乎看到一个问题:“平民不参与内测的话没有账号还有机会使用ChatGPT吗?” 从去年GPT大火到现在,关于GPT的消息铺天盖地,真要有心想要去用,途径很多,别的不说,国内GPT的镜像…...
5.SpringSpringBoot八股
Spring,Spring MVC,Spring Boot 之间什么关系? Spring就是整个Spring框架的整体,包含AOP、JDBC、Spring MVC等等模块 SpringBoot是Spring的精简版,它在Spring的基础上添加了自动装配、内置tomcat服务器等功能,使得代码量更少,同…...
0基础刷图论最短路 3(从ATcoder 0分到1800分)
AT最短路刷题3(本文难度rated 1200~ 1400) 题目来源:Atcoder 题目收集: https://atcoder-tags.herokuapp.com/tags/Graph/Shortest-Path (里面按tag分类好了Atcoder的所有题目,类似cf) &#x…...
k8s+docker一键安装过程
环境: k8s 1.20 docker 20.10 centos7.9 #docker安装 yum install -y epel-release yum install -y yum-utils yum-config-manager --add-repo https://mirrors.ustc.edu.cn/docker-ce/linux/centos/docker-ce.repo yum install -y docker-ce-20.10.6 docker-ce-cli-2…...
Python3+Appium+Android SDK+真机+实现app自动化测试-基于Red Hat7.9版本搭建环境及运行python脚本。
1、总体概述? 收费有收费的服务,那就是细致。Red Hat9.0自动化环境也有,需要的说一声。 1、实现在Red Ha/t Enterprise Linux7.9环境中搭建部署app自动化测试环境,提供详细步骤。 2、版本说明:jdk8/17+nodejs16/18/19/20/21+android sdk29+python3.9.18/3.11.1+appium1…...
深入理解MD5算法:原理、应用与安全
title: 深入理解MD5算法:原理、应用与安全 date: 2024/4/11 20:55:57 updated: 2024/4/11 20:55:57 tags: MD5算法数据安全哈希函数摘要算法安全漏洞SHA算法密码学 第一章:引言 导言 在当今数字化时代,数据安全和完整性变得至关重要。消息…...
架构师系列-搜索引擎ElasticSearch(三)- Java API
SpringBoot整合ES 搭建SpringBoot工程,引入ElasticSearch相关坐标 <!--引入es的坐标--><dependency><groupId>org.elasticsearch.client</groupId><artifactId>elasticsearch-rest-high-level-client</artifactId><versi…...
Ubuntu下配置Android NDK环境
Android-NDK的下载 下载Android-NDK wget -c http://dl.google.com/android/ndk/android-ndk-r10e-linux-x86_64.bin 执行bin文件(即解压) ./android-ndk-r10c-linux-x86_64.bin Android-NDK的配置 要想使用Android-NDK,还需要进行环境变量…...
使用 vue3-sfc-loader 加载远程Vue文件, 在运行时动态加载 .vue 文件。无需 Node.js 环境,无需 (webpack) 构建步骤
加载远程Vue文件 vue3-sfc-loader vue3-sfc-loader ,它是Vue3/Vue2 单文件组件加载器。 在运行时从 html/js 动态加载 .vue 文件。无需 Node.js 环境,无需 (webpack) 构建步骤。 主要特征 支持 Vue 3 和 Vue 2(参见dist/)仅需…...
stm32移植嵌入式数据库FlashDB
本次实验的程序链接stm32f103FlashDB嵌入式数据库程序资源-CSDN文库 一、介绍 FlashDB 是一款超轻量级的嵌入式数据库,专注于提供嵌入式产品的数据存储方案。与传统的基于文件系统的数据库不同,FlashDB 结合了 Flash 的特性,具有较强的性能…...
江苏手机网站建设/优秀的品牌策划案例
原型与原型链图 栈(stack):由编译器自动分配释放,存放函数参数值,局部变量,先进后出的一个队列 堆(heap):一般由程序员分配释放,集合,无序 原型…...
交互做的很好的网站/如何推广自己的网站
字符串基本操作 所有标准的序列操作(索引、分片、乘法、判断成员资格、求长度、取最小值和最大值)对字符串同样适用,前面已经讲述的这些操作。但是,请注意字符串都是不可变的。 字符串的方法: 字符串从string 模块中“…...
wordpress加入http请求/企业培训机构
同步(Sync) 所谓同步,就是发出一个功能调用时,在没有得到结果之前,该调用就不返回或继续执行后续操作。 根据这个定义,Java中所有方法都是同步调用,应为必须要等到结果后才会继续执行。我们在说…...
网页设计与网站建设 在线测试/seo网站推广教程
先点hex 后点 decimal 再开始start attack,这是一个软件bug,需要手动让它刷新。...
wordpress页面模板目录文件下载/长沙靠谱关键词优化公司电话
yum安装gitlab 时提示 "*.rpm is not signed"或者"*.rpm is not signed" ,只需将 /etc/yum.conf 中 "gpgcheck1" 改为 "gpgcheck0" 即可。...
犀牛云做的网站怎么样/百度竞价课程
---- 设置 Oracle 监听器密码(LISTENER)--监听器也有安全?Sure!在缺省的情况下,任意用户不需要使用任何密码即通过lsnrctl 工具对Oracle Listener进行操作或关闭,从而造成任意新的会话都将无法建立连接。在Oracle 9i 中Oracle监听…...