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

html 轮播图效果

news 文章来源：https://blog.csdn.net/qq_42934208/article/details/143052959 2024/11/28 4:48:06

轮播效果：

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 轮播图效果

轮播效果&#xff1a; 1、鼠标没有移入到banner,自动轮播 2、鼠标移入&#xff1a;取消自动轮播、移除开始自动轮播 3、点击指示点开始轮播到对应位置 4、点击前一个后一个按钮&#xff0c;轮播到上一个下一个图片 注意 最后一个图片无缝滚动&#xff0c;就是先克隆第一个图片…...

编程日记 2024/10/25 6:12:56

Android Room(SQLite) too many SQL variables异常

SQLiteException 一、解决办法1. 修改数据库语句2. 分批执行 二、问题根源 转载请注明出处: https://blog.csdn.net/hx7013/article/details/143198862 在使用 Room 或其他基于 SQLite 的 ORM 框架时&#xff0c;批量操作如 IN 或 NOT IN 查询可能会触发 android.database.sqli…...

编程日记 2024/10/25 6:11:55

sentinel原理源码分析系列(八)-熔断

限流为了防止过度使用资源造成系统不稳&#xff0c;熔断是为了识别出”坏”资源&#xff0c;避免好的资源受牵连(雪崩效应)&#xff0c;是保证系统稳定性的关键&#xff0c;也是资源有效使用的关键&#xff0c;sentinel熔断插槽名称Degrade(降级)&#xff0c;本人觉得应该改为熔…...

编程日记 2024/10/25 6:10:54

安全见闻（4）——开阔眼界，不做井底之蛙

内容预览 ≧∀≦ゞ 安全见闻四&#xff1a;操作系统安全机制深度解析声明操作系统机制1. 注册表2. 防火墙3. 自启动与计划任务4. 事件日志5. 内核驱动与设备驱动6. 系统服务7. 进程与线程8. 系统编程 从操作系统机制看病毒设计1. 自启动&#xff1a;病毒如何在系统启动时运行&a…...

编程日记 2024/10/25 6:09:51

(二十二)、k8s 中的关键概念

文章目录 1、总体概览2、第一层&#xff1a;物理机、集群、Node、Pod 之间的关系2、第二层&#xff1a;命名空间 Namespace3、定义4、控制平面&#xff08;Control Plane&#xff09;5、特别的概念 Service6、Deployment 经过 之前几篇文章对 k8s 的实践&#xff0c;结合实践&…...

编程日记 2024/10/25 6:08:44

python基础综合案例（数据可视化-地图可视化）

1.基础地图使用 注意写名字的时候要写全名&#xff0c;比如上海市不能写出上海&#xff0c;不然看不到数据 鼠标点击即可看到数据 设置属性的时候不要忘记导包 # 演示地图可视化的基础使用 from pyecharts.charts import Map from pyecharts.options import VisualMapOpts # 准…...

编程日记 2024/10/25 6:07:42

基于SpringBoot足球场在线预约系统的设计与实现

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…...

编程日记 2024/10/25 6:05:39

操作系统笔记（二）进程，系统调用，I/O设备

什么是进程? 一个正在执行的程序一个包含运行一个程序所需要的所有信息的容器进程的信息保存在一个进程表中（ Process Table）。进程表中的每一项对应一个进程，称为进程控制块（Process control block，PCB）。 PCB信息包括： 用户ID（UID）、进程ID（PID）…...

编程日记 2024/10/25 6:03:37

DevOps实践：在GitLab CI/CD中集成静态分析Helix QAC的工作原理与优势

基于云的GitLab CI/CD平台使开发团队能够简化其CI/CD流程&#xff0c;并加速软件开发生命周期&#xff08;SDLC&#xff09;。 将严格的、基于合规性的静态分析&#xff08;如Helix QAC所提供&#xff09;作为新阶段添加到现有的GitLab CI/CD流程中&#xff0c;将进一步增强SD…...

编程日记 2024/10/25 6:02:33

前端面试题-token的登录流程、JWT

这是我的前端面试题的合集的第一篇&#xff0c;后面也会更新一些笔试题目。秋招很难&#xff0c;也快要结束了。但是&#xff0c;不要放弃&#xff0c;一起加油^_^ 一、token的登录流程 1.客户端用账号密码请求登录 2.服务端收到请求&#xff0c;需要去验证账号密码 3.验证成…...

编程日记 2024/10/25 6:00:30

【软考高级架构】关于分布式数据库缓存redis的知识要点汇总

一.分布式数据库的含义 分布式数据库缓存指的是在高并发的环境下&#xff0c;为了减轻数据库的压力和提高系统响应时间&#xff0c;在数据库系统和应用系统之间增加一个独立缓存系统。 二.常见的缓存技术 &#xff08;1&#xff09;MemCache: Memcache是一个高性能的分布式的内…...

编程日记 2024/10/25 5:59:28

构建自然灾害预警决策一体化平台，筑牢工程安全数字防线

近年来&#xff0c;国家和部委也强调了要切实加强地质灾害监测预警。作为国内智慧应急领域的先行者&#xff0c;Mapmost持续探索利用数字孪生技术&#xff0c;推进自然灾害风险预警精细化&#xff0c;强化对监测数据的综合分析和异常信息研判处置。建立健全区域风险预警与隐患点…...

编程日记 2024/10/25 5:58:27

随机题两题

逆序对 题目 给定一个数组&#xff0c;求其中有多少逆序对&#xff0c;要求时间复杂度不超过nlogn。 思路 使用归并排序的分治思想&#xff0c;将数组递归地分为左右两部分。在合并两个有序子数组时&#xff0c;若左侧数组中的某个数大于右侧数组中的某个数&#xff0c;则可…...

编程日记 2024/10/25 5:57:26

信息安全工程师（69）数字水印技术与应用

前言 数字水印技术是一种在数字媒体中嵌入特定信息的技术&#xff0c;这些信息可以是版权信息、元数据等。 一、数字水印技术的定义与原理 数字水印技术&#xff08;Digital Watermarking&#xff09;是将一些标识信息&#xff08;即数字水印&#xff09;直接嵌入数字载体&…...

编程日记 2024/10/25 5:54:22

知识点框架笔记3.0笔记

如果基础太差&#xff0c;搞不清基本交规的&#xff08;模考做不到60分&#xff09;&#xff0c;建议找肖肖或者小轩老师的课程看一遍&#xff0c;内容差不多&#xff08;上面有链接&#xff09;&#xff0c;笔记是基于肖肖和小轩老师的科目一课程以及公安部交管局法规&#xf…...

编程日记 2024/10/25 5:53:20

Android组件化开发

Android组件化开发 组件化开发概念组件化开发的由来组件化开发有什么优势？组件化开发如何拿到入口参数？如何解决相同资源文件名合并的冲突？模式切换，如何使APP在单独调试跟整体调试自由切换？多个Module之间如何引用一些共同的library以及工具类？我们如何实现依赖关系及组…...

编程日记 2024/10/25 5:52:19

centos-LAMP搭建与配置（论坛网站）

文章目录 LAMP简介搭建LAMP环境安装apache&#xff08;httpd&#xff09;安装mysql安装PHP安装php-mysql安装phpwind LAMP简介 LAMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写&#xff1a;Linux操作系统&#xff0c;网页服务器Apache&#xff0c;…...

编程日记 2024/10/25 5:51:18

Python 实现日期计算与日历格式化输出

目录 一、引言 二、需求分析 三、实现思路 四、代码实现 五、代码分析 六、测试与验证 七、总结与展望 在日常的编程中&#xff0c;我们经常会遇到与日期相关的问题&#xff0c;比如计算两个日期之间的天数差、确定某个特定日期是星期几以及格式化输出日历等。本文将详细…...

编程日记 2024/10/25 5:50:18

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 ------…...

编程日记 2024/10/25 5:47:14

【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff（geogrid，WPS所需数据）

【WRF数据处理】基于GIS4WRF插件将geotiff数据转为tiff&#xff08;geogrid&#xff0c;WPS所需数据&#xff09; 数据准备&#xff1a;以叶面积指数LAI为例QGis实操&#xff1a;基于GIS4WRF插件将geotiff数据转为tiff警告&#xff1a;GIS4WRF: Input layer had an unexpected …...

编程日记 2024/10/25 5:46:13

python+大数据+基于Hadoop的个性化图书推荐系统【内含源码+文档+部署教程】

博主介绍&#xff1a;✌全网粉丝10W,前互联网大厂软件研发、集结硕博英豪成立工作室。专注于计算机相关专业毕业设计项目实战6年之久&#xff0c;选择我们就是选择放心、选择安心毕业✌ &#x1f345;由于篇幅限制&#xff0c;想要获取完整文章或者源码&#xff0c;或者代做&am…...

编程日记 2024/10/25 5:45:12

修改huggingface的缓存目录以及镜像源

执行以下语句查看当前配置 huggingface-cli env默认输出应该如下 (py39-transformers) PS D:\py_project\transformers_demo> huggingface-cli envCopy-and-paste the text below in your GitHub issue.- huggingface_hub version: 0.26.1 - Platform: Windows-10-10.0.22…...

编程日记 2024/10/25 5:44:11

散列表：如何解决哈希表装载因子过高导致的性能下降问题？

散列表：如何解决哈希表装载因子过高导致的性能下降问题？ 当哈希表装载因子过高时，会导致性能下降，可以通过以下几种方法来解决： 一、扩容哈希表 （一）原理 当装载因子超过一定阈值时，增加哈希表的大小，然后将现有的元素重新哈希到新的哈希表中。这样可以降低装载因…...

编程日记 2024/10/25 5:43:09

Vue Router进阶学习

各位程序员1024节日快乐~ Vue Router 是 Vue.js 的官方路由管理器&#xff0c;它和 Vue.js 的核心深度集成&#xff0c;让构建单页面应用&#xff08;SPA&#xff09;变得简单。以下是 Vue Router 的基本用法 Vue Router 基本用法 安装 Vue Router 首先&#xff0c;你需要安…...

编程日记 2024/10/25 5:42:07

Linux巡检利器xsos的安装和使用

一、 一般项目基本完成的时候&#xff0c;后期运维工作的重点就是及时的&#xff0c;合理的频率巡检了&#xff0c;巡检的目的主要是及时发现各种各样的问题 那么&#xff0c;自己编写shell脚本是大部分人的第一选择&#xff0c;这里有个比较麻烦的地方&#xff0c;shell脚本…...

编程日记 2024/10/25 5:41:04

Django+Vue项目搭建

一、使用脚手架工具搭建项目 使用脚手架工具搭建Vue项目是一个快速且高效的方式&#xff0c;它能够帮助开发者自动配置好项目所需的环境和依赖。 一、安装Node.js和npm 1、下载Node.js&#xff1a; 前往Node.js官网下载并安装最新版本的Node.js。Node.js是一个基于Ch…...

编程日记 2024/10/25 5:40:03

【NLP自然语言处理】Attention机制原理揭秘：赋予神经网络‘聚焦’与‘理解’的神奇力量

目录 &#x1f354; 注意力机制原理 1.1 注意力机制示意图 1.2 Attention计算过程 1.3 Attention计算逻辑 1.4 有无Attention模型对比 1.4.1 无Attention机制的模型 1.4.2 有Attention机制的模型 &#x1f354; Self-attention演变过程 2.1 Self-attention介绍 2.2 S…...

编程日记 2024/10/25 5:39:02

PHP依赖注入的原理

PHP中的依赖注入&#xff08;Dependency Injection&#xff0c;简称DI&#xff09;是一种设计模式&#xff0c;旨在解耦和管理对象之间的依赖关系&#xff0c;使得代码更加灵活、可测试和可维护。其原理及关键要点如下&#xff1a; 一、原理 依赖注入的原理是通过外部传递依赖…...

编程日记 2024/10/25 5:37:00

文本相似度方案

文章目录 SequenceMatcher余弦相似度基于逆向文档频率向量化 SequenceMatcher from difflib import SequenceMatcher s1 "1.2 章节标题【abc】" s2 "1.2 章节标题【abc】、【she】、【this】" SequenceMatcher(None, s1, s2).ratio() # 0.6666666666666…...

编程日记 2024/10/25 5:33:52

appium 的工作原理

** 安卓&#xff1a; ** 1.1 appuim 基于 uiautomator2 的原理 appium 服务启动后默认在 4723 端口上创建一个 http 服务&#xff0c;脚本通过服务地址 http://xxxx:4723/wd/hub 和 appium 进行通信 在 初 始 化 脚 本 和 appium 连 接 的 过 程 中 appium 会 向 手 机 就 …...

编程日记 2024/10/25 5:31:46

中山网站制作套餐/品牌宣传策略

转自 http://blog.csdn.net/zhengzhb/article/details/7187278 在java以及其他的面向对象设计模式中&#xff0c;类与类之间主要有6种关系&#xff0c;他们分别是&#xff1a;依赖、关联、聚合、组合、继承、实现。他们的耦合度依次增强。 1. 依赖&#xff08;Dependence&…...

编程日记 2024/11/28 4:45:50

设计公司网站设计/推广赚钱一个2元

1. 什么是列表列表由一系列按特定顺序排列的元素组成。例如包含所有英文字母的列表&#xff0c;包含班级所有同学姓名的列表&#xff0c;包含你的所有朋友的列表等等。当然列表元素也可以毫无关系&#xff0c;只是一系列数据。Python中用方括号 "[ ]" 表示列表&#…...

编程日记 2024/11/28 4:09:31

用七牛做网站/seo优化报价

相关参考资料链接&#xff1a; CORDIC算法计算正余弦 cordic算法的verilog实现及modelsim仿真 CORDIC算法--流水线结构 verilog实现基于Cordic算法的双曲函数计算 FPGA数字信号处理&#xff08;十四&#xff09;Vivado Cordic IP核计算arctan xilinx cordic IP核的用法- …...

编程日记 2024/11/28 2:48:53

不花钱的网站怎么做/济南网站建设哪家好

点击率&#xff1a;每秒钟客户端向服务器端发起的http请求个数&#xff08;不是片面的指鼠标点击次数&#xff0c;例如&#xff0c;点击一个按钮服务器返回一个页面且包含3个图片&#xff0c;那么向服务器发送的请求数为4&#xff09; 吞吐量&#xff1a;累计时间内的全部数据量…...

编程日记 2024/11/27 23:53:25

相亲网站做期货现货贵金属的人/中山360推广

Linux Command losetup 设置循环设备 文章目录Linux Command losetup 设置循环设备1. 背景2. 简介3. 语法4. 参数5. 实例5.1 示例15.2 示例21. 背景 在类 UNIX 系统里&#xff0c;loop 设备是一种伪设备(pseudo-device)&#xff0c;或者也可以说是仿真设备。它能使我们像块设备…...

编程日记 2024/11/27 22:34:48

自己做的网站怎么加搜索功能/建站系统源码

GBase 8c 数据库创建用户/角色的语法说明&#xff1a; 语法格式如下&#xff1a; CREATE USER/ROLE name [ [ WITH ] option [ ... ] ] 选项&#xff1a; SUPERUSER | NOSUPERUSER :超级权限&#xff0c;拥有所有权限&#xff0c;默认nosuperuser。 | CREATEDB | NOC…...

编程日记 2024/11/27 22:11:36