html 轮播图效果
轮播效果:
1、鼠标没有移入到banner,自动轮播

2、鼠标移入:取消自动轮播、移除开始自动轮播

3、点击指示点开始轮播到对应位置

4、点击前一个后一个按钮,轮播到上一个下一个图片

注意
最后一个图片无缝滚动,就是先克隆第一个图片,把它放到最后面。
当轮播到最后视觉最后一个图片下一个图片理想应该是播放第一个,但是这样直接到第一个会很生硬,所以在最后克隆了第一个图片,这样就会平滑的从视觉效果过度到第一个,再次播放下一个图的时候则使用xx.style.left = 0属性快速切为第一个(无动画效果)
轮播图.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 加载动画 --><script src="js/animate.js"></script><script src="js/banner.js"></script><style>*{margin: 0;}.box{width: 100vw;height: 100vh;padding-top:20px ;background-color: aliceblue;box-sizing: border-box ;}.box .ul-box{position: relative;margin: auto;width: 450px;height: 230px;overflow: hidden;/* background-color: #ff00aa; */}.ul-box #img-ul{position: absolute;width: 400%;/* 去除li样式 */list-style: none; /* 移除列表项前的符号 */padding-left: 0;margin: 0}.ul-box #img-ul li{background-color: rgb(202, 214, 225);/* opacity: 0.2; */width: 450px;height: 230px;float: left;}.ul-box #img-ul li img{width: 450px;height: 230px;}#dot-ul{position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;background-color: rgb(232, 234, 234);opacity: 0.8;list-style: none; /* 移除列表项前的符号 */padding-left: 0;margin: 0;border-radius: 12px;}#dot-ul li{margin: 5px;height:10px;width: 10px;border: 1px solid #ffffff;border-radius: 50%;}.active{background-color: #ffffff;}.un-active{background-color: none;}/* 按钮 */#left-btn,#right-btn{position: absolute;top: 50%;transform: translateY(-50%);background-color: aliceblue;opacity: 0.5;border-radius: 5px;color: rgb(66, 66, 56);padding: 2px;}#left-btn{left: 0;}#right-btn{right: 0;}</style>
</head>
<body><div class="box"><div class="ul-box" id="ul-box"><ul id="img-ul"><li><img src="./imgs/1.png"></li><li> <img src="./imgs/2.png"></li><li> <img src="./imgs/3.png"></li></ul><ul id="dot-ul"><!-- <li class="active" > </li><li > </li><li > </li> --></ul><div id="left-btn"><</div><div id="right-btn">></div></div></div>
</body>
</html>
js文件夹下banner.js
window.addEventListener('load', () => {let timeGap = 20let allTime = 500let picWidth = 450let playTimer = null //自动播放let palyTime = 2000 + allTimelet currentIndex = 0 //当前播放// 包裹盒子let ulBox = document.getElementById('ul-box')// 获取ullet imgUlEl = document.getElementById('img-ul')// 获取img ul下的li个数let imgLiElList = imgUlEl.getElementsByTagName('li')// 指示点 ullet dotUlEl = document.getElementById('dot-ul')// 创建知识点 lifor (let i = 0; i < imgLiElList.length; i++) {// 创建元素let liEl = document.createElement('li')liEl.id = 'dotli-' + idotUlEl.appendChild(liEl)}// 克隆第一个图片if (imgLiElList.length) {let firstPicEl = imgLiElList[0]let cloneEl = firstPicEl.cloneNode(true)imgUlEl.appendChild(cloneEl)}// 获取指示点 li列表let dotLiEllist = dotUlEl.getElementsByTagName('li')//修改dot状态function changeDot() {for (let j = 0; j < dotLiEllist.length; j++) {let itemEl = dotLiEllist[j]itemEl.className = 'un-active'}if (currentIndex >= dotLiEllist.length) {// 如果是最后一个克隆的照片则默认指示点是第一个dotLiEllist[0].className = 'active'} else {dotLiEllist[currentIndex].className = 'active'}}// 第一个设置原点激活样式currentIndex = 0changeDot()// 指示点添加点击事件for (let i = 0; i < dotLiEllist.length; i++) {let elI = dotLiEllist[i]elI.addEventListener('click', () => {// 修改当前状态currentIndex = i//修改dot状态changeDot()// 计算需要移动的距离let distance = -picWidth * iconsole.log(distance)animate(imgUlEl, distance, timeGap, allTime)})}// 鼠标移动去除自动播放ulBox.addEventListener('mouseover', () => {console.log('mouseover')if (playTimer) {clearTimeout(playTimer)}})// 鼠标移除自动播放ulBox.addEventListener('mouseleave', () => {console.log('mouseleave')autoPlay()})// 自动播放图片function autoPlay() {playTimer = setTimeout(() => {if (currentIndex == dotLiEllist.length) {currentIndex = 0imgUlEl.style.left = 0}currentIndex++//判断是否是最后一个图片animate(imgUlEl, -picWidth * currentIndex, timeGap, allTime, () => {//修改dot状态changeDot()if (playTimer) {clearTimeout(playTimer)}autoPlay()})}, palyTime)}//调用自动播放autoPlay()// 按钮添加点击事件let btnLeft = document.getElementById('left-btn')let btnRight = document.getElementById('right-btn')btnLeft.style.cursor = 'grab'btnRight.style.cursor = 'grab'btnLeft.addEventListener('click', () => {if (currentIndex > 0) {currentIndex--animate(imgUlEl, -picWidth * currentIndex, timeGap, allTime)changeDot()}})btnRight.addEventListener('click', () => {// 滑动到最后一个克隆的照片if (currentIndex == dotLiEllist.length) {currentIndex = 1imgUlEl.style.left = 0} else {currentIndex++}animate(imgUlEl, -picWidth * currentIndex, timeGap, allTime)changeDot()})
})
js文件夹下animate.js
// 给元素添加动画效果
// targetPosition 目标位置
// timeGap 每次移动时间间隔
// allTime 花费多久移动完
// callBack 回调函数
function animate(el, targetPosition, timeGap = 100, allTime = 1000, callBack) {let offsetX = el.offsetLeft//需要移动位置let distance = targetPosition - offsetX// 每隔一段时间移动一段距离let moveCount = allTime / timeGap // 总共移动多少次let moveDistance = distance / moveCount //每次移动多少距离let timer = setInterval(() => {// console.log(moveCount, moveDistance)offsetX = el.offsetLeft //相对父元素的距离el.style.left = offsetX + moveDistance + 'px'moveCount-- //移动次数减少distance = distance - moveDistance //总共需要移动的距离if (moveCount <= 0) {//防止没有计算完el.style.left = targetPosition + 'px'// 执行回调callBack ? callBack() : ''clearInterval(timer)}}, timeGap)
}
图片资源
放到imgs文件夹下即可,对应命名为1.png、2.png、3.png即可
纯属参考,可能会存在很多bug
相关文章:
html 轮播图效果
轮播效果: 1、鼠标没有移入到banner,自动轮播 2、鼠标移入:取消自动轮播、移除开始自动轮播 3、点击指示点开始轮播到对应位置 4、点击前一个后一个按钮,轮播到上一个下一个图片 注意 最后一个图片无缝滚动,就是先克隆第一个图片…...
Android Room(SQLite) too many SQL variables异常
SQLiteException 一、解决办法1. 修改数据库语句2. 分批执行 二、问题根源 转载请注明出处: https://blog.csdn.net/hx7013/article/details/143198862 在使用 Room 或其他基于 SQLite 的 ORM 框架时,批量操作如 IN 或 NOT IN 查询可能会触发 android.database.sqli…...
sentinel原理源码分析系列(八)-熔断
限流为了防止过度使用资源造成系统不稳,熔断是为了识别出”坏”资源,避免好的资源受牵连(雪崩效应),是保证系统稳定性的关键,也是资源有效使用的关键,sentinel熔断插槽名称Degrade(降级),本人觉得应该改为熔…...
安全见闻(4)——开阔眼界,不做井底之蛙
内容预览 ≧∀≦ゞ 安全见闻四:操作系统安全机制深度解析声明操作系统机制1. 注册表2. 防火墙3. 自启动与计划任务4. 事件日志5. 内核驱动与设备驱动6. 系统服务7. 进程与线程8. 系统编程 从操作系统机制看病毒设计1. 自启动:病毒如何在系统启动时运行&a…...
(二十二)、k8s 中的关键概念
文章目录 1、总体概览2、第一层:物理机、集群、Node、Pod 之间的关系2、第二层:命名空间 Namespace3、定义4、控制平面(Control Plane)5、特别的概念 Service6、Deployment 经过 之前几篇文章对 k8s 的实践,结合实践&…...
python基础综合案例(数据可视化-地图可视化)
1.基础地图使用 注意写名字的时候要写全名,比如上海市不能写出上海,不然看不到数据 鼠标点击即可看到数据 设置属性的时候不要忘记导包 # 演示地图可视化的基础使用 from pyecharts.charts import Map from pyecharts.options import VisualMapOpts # 准…...
基于SpringBoot足球场在线预约系统的设计与实现
💗博主介绍💗:✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示:文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…...
操作系统笔记(二)进程,系统调用,I/O设备
什么是进程? 一个正在执行的程序一个包含运行一个程序所需要的所有信息的容器进程的信息保存在一个进程表中( Process Table)。进程表中的每一项对应一个进程,称为进程控制块(Process control block,PCB)。 PCB信息包括: 用户ID(UID)、进程ID(PID)…...
DevOps实践:在GitLab CI/CD中集成静态分析Helix QAC的工作原理与优势
基于云的GitLab CI/CD平台使开发团队能够简化其CI/CD流程,并加速软件开发生命周期(SDLC)。 将严格的、基于合规性的静态分析(如Helix QAC所提供)作为新阶段添加到现有的GitLab CI/CD流程中,将进一步增强SD…...
前端面试题-token的登录流程、JWT
这是我的前端面试题的合集的第一篇,后面也会更新一些笔试题目。秋招很难,也快要结束了。但是,不要放弃,一起加油^_^ 一、token的登录流程 1.客户端用账号密码请求登录 2.服务端收到请求,需要去验证账号密码 3.验证成…...
【软考高级架构】关于分布式数据库缓存redis的知识要点汇总
一.分布式数据库的含义 分布式数据库缓存指的是在高并发的环境下,为了减轻数据库的压力和提高系统响应时间,在数据库系统和应用系统之间增加一个独立缓存系统。 二.常见的缓存技术 (1)MemCache: Memcache是一个高性能的分布式的内…...
构建自然灾害预警决策一体化平台,筑牢工程安全数字防线
近年来,国家和部委也强调了要切实加强地质灾害监测预警。作为国内智慧应急领域的先行者,Mapmost持续探索利用数字孪生技术,推进自然灾害风险预警精细化,强化对监测数据的综合分析和异常信息研判处置。建立健全区域风险预警与隐患点…...
随机题两题
逆序对 题目 给定一个数组,求其中有多少逆序对,要求时间复杂度不超过nlogn。 思路 使用归并排序的分治思想,将数组递归地分为左右两部分。在合并两个有序子数组时,若左侧数组中的某个数大于右侧数组中的某个数,则可…...
信息安全工程师(69)数字水印技术与应用
前言 数字水印技术是一种在数字媒体中嵌入特定信息的技术,这些信息可以是版权信息、元数据等。 一、数字水印技术的定义与原理 数字水印技术(Digital Watermarking)是将一些标识信息(即数字水印)直接嵌入数字载体&…...
知识点框架笔记3.0笔记
如果基础太差,搞不清基本交规的(模考做不到60分),建议找肖肖或者小轩老师的课程看一遍,内容差不多(上面有链接),笔记是基于肖肖和小轩老师的科目一课程以及公安部交管局法规…...
Android组件化开发
Android组件化开发 组件化开发概念组件化开发的由来组件化开发有什么优势?组件化开发如何拿到入口参数?如何解决相同资源文件名合并的冲突?模式切换,如何使APP在单独调试跟整体调试自由切换?多个Module之间如何引用一些共同的library以及工具类?我们如何实现依赖关系及组…...
centos-LAMP搭建与配置(论坛网站)
文章目录 LAMP简介搭建LAMP环境安装apache(httpd)安装mysql安装PHP安装php-mysql安装phpwind LAMP简介 LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写:Linux操作系统,网页服务器Apache,…...
Python 实现日期计算与日历格式化输出
目录 一、引言 二、需求分析 三、实现思路 四、代码实现 五、代码分析 六、测试与验证 七、总结与展望 在日常的编程中,我们经常会遇到与日期相关的问题,比如计算两个日期之间的天数差、确定某个特定日期是星期几以及格式化输出日历等。本文将详细…...
npm install 安装很慢怎么办?
安装源管理器nrm sudo npm install -g nrm #macOSnpm install -g nrm #Windows以管理员身份运行 安装完毕之后通过以下命令可以切换你想要的源 nrm ls #查看源列表* npm ---------- https://registry.npmjs.org/yarn --------- https://registry.yarnpkg.com/tencent ------…...
【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff(geogrid,WPS所需数据)
【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff(geogrid,WPS所需数据) 数据准备:以叶面积指数LAI为例QGis实操:基于GIS4WRF插件将geotiff数据转为tiff警告:GIS4WRF: Input layer had an unexpected …...
转转集团旗下首家二手多品类循环仓店“超级转转”开业
6月9日,国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解,“超级…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
leetcodeSQL解题:3564. 季节性销售分析
leetcodeSQL解题:3564. 季节性销售分析 题目: 表:sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...
Qt 事件处理中 return 的深入解析
Qt 事件处理中 return 的深入解析 在 Qt 事件处理中,return 语句的使用是另一个关键概念,它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别:不同层级的事件处理 方…...
HTML前端开发:JavaScript 获取元素方法详解
作为前端开发者,高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法,分为两大系列: 一、getElementBy... 系列 传统方法,直接通过 DOM 接口访问,返回动态集合(元素变化会实时更新)。…...
十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建
【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
