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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/57574.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux -- 进程间通信、初识匿名管道

目录 进程间通信 什么是进程间通信 进程间通信的一般规律 前言&#xff1a; 管道 代码预准备&#xff1a; 如何创建管道 -- pipe 函数 参数&#xff1a; 返回值&#xff1a; wait 函数 参数&#xff1a; 验证管道的运行&#xff1a; 源文件 test.c &#xff1a; m…

独孤思维:新学员副业一周出单

所谓的一万小时定律。 即在某个技能上面&#xff0c;花费超过1万小时。 如果每天刻意练习1小时&#xff0c;则需要30年。 可行吗&#xff1f; 极难。 所以不要过分迷恋这种定律。 对于我们普通人而言&#xff0c;可以训练一个月或者三个月&#xff0c;即可掌握某项技能。…

深入解析:Linux tcpdump命令在网络流量分析中的实战应用

tcpdump是一个强大的命令行工具&#xff0c;用于捕获和分析TCP、UDP、ICMP等协议的网络流量。 功能与用途 捕获网络流量&#xff1a;tcpdump可以捕获和显示来自本地计算机或通过网络传输的数据包&#xff0c;提供有关数据包的详细信息&#xff0c;如源和目的IP地址、端口号、…

Python正则表达式(re模块)的正确匹配详解

基本匹配及一些符号的特定含义 正则表达式是用于处理文本的强大工具&#xff0c;在Python中通过 re 模块来使用。 基本匹配 - 首先要导入 re 模块。例如&#xff0c;要在字符串中查找简单的单词 apple &#xff0c;可以这样写&#xff1a; import re text "I have an a…

flutter集成极光推送

一、简述 极光推送&#xff0c;英文简称 JPush&#xff0c;免费的第三方消息推送服务&#xff0c;官方也推出众多平台的SDK以及插件。 参考链接 名称地址客户端集成插件客户端集成插件 - 极光文档 二、操作步骤 2.1 添加插件 flutter项目中集成官方提供的 极光推送flutte…

能源管理系统

一、介绍 基于SpringCloud的能管管理系统-能源管理平台源码-能源在线监测平台-双碳平台源码-SpringCloud全家桶-能管管理系统源码 二、软件架构 二、功能介绍 三、数字大屏展示 四、数据采集原理 五、软件截图

小渡Al论文写作:50个GPT学术指令——1天搞定1篇论文

选题与研究方向 假设你是某高校某专业的教授&#xff0c;请根据我感兴趣的研究方向&#xff0c;为我提供10个新颖且有研究意义的论文选题。我对某个选题感兴趣&#xff0c;请列举几个该领域当前的研究热点和争议点供我选择。假设我是某专业本科生/研究生&#xff0c;请为我提供…

springboot集成pdfbox解析pdf文件

springboot集成pdfbox解析pdf文件 1、引入依赖2、获取PDF文件3、获取需要的字段信息4、获取多字段时&#xff0c;步骤3需要优化&#xff0c;以下为优化后代码 1、引入依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</a…

iconfont图标放置在某个元素的最右边

在网页设计中&#xff0c;如果你想要将iconfont图标放置在某个元素的最右边&#xff0c;你可以通过CSS来实现这个布局。以下是一些基本的CSS代码示例&#xff0c;它们可以帮助你根据不同的布局需求将图标放置在最右边&#xff1a; 内联元素&#xff08;如<span>&#xff…

perl读取目录,写入文件

perl读取目录&#xff0c;写入文件 此脚本有两个输入参数&#xff0c;第一个参数为需要打印的文件目录&#xff0c;第二个参数为打印后的文件名&#xff1b; 该脚本名称为out_file_full_path #!/bin/perluse 5.010; my $dir $ARGV[0]; # 此为第一个参数&#xff1b; opendi…

Unreal Engine5安装Niagara UI Renderer插件

系列文章目录 文章目录 系列文章目录前言一、如何下载安装Niagara UI Renderer插件 前言 在2024.10.24号的今天发现unreal engine官网已经没有虚幻商城了&#xff0c;取而代之的是FAB ‌虚幻商城已经停止运营&#xff0c;Epic Games推出了新的数字资产商店FAB。‌ Epic Games…

Python URL编码

在 Python 中&#xff0c;可以使用 urllib.parse模块对 URL 进行编码。 一、依赖安装 pip install urllib 二、URL编码 from urllib.parse import quoteurl rhttps://myshop.com/shop/shopList?query query {"id":14,"pageSize":10,"pageNum&quo…

【论文+源码】基于SSM+VUE的大学生兼职管理系统

创建一个大学生兼职管理系统&#xff0c;结合 SSM&#xff08;Spring Spring MVC MyBatis&#xff09;框架和 Vue.js 前端框架&#xff0c;可以分为几个主要步骤来实现。 第一部分&#xff1a;环境准备 1. 开发环境准备 Java JDK&#xff1a;确保已安装 Java 8 或更高版本。…

2024软考网络工程师笔记 - 第8章.网络安全

文章目录 网络安全基础1️⃣网络安全威胁类型2️⃣网络攻击类型3️⃣安全目标与技术 &#x1f551;现代加密技术1️⃣私钥密码/对称密码体制2️⃣对称加密算法总结3️⃣公钥密码/非对称密码4️⃣混合密码5️⃣国产加密算法 - SM 系列6️⃣认证7️⃣基于公钥的认证 &#x1f552…

从0开始深度学习(19)——参数管理

在选择了模型架构&#xff0c;并设置了超参数之后&#xff0c;就进入了训练阶段&#xff0c;此时&#xff0c;我们的目标是找到使损失函数最小化的模型参数值。 经过训练后&#xff0c;我们将需要使用这些参数来做出未来的预测。 此外&#xff0c;有时我们希望提取参数&#xf…

电子商务类型

常见电子商务类型及其代表性的例子&#xff1a; B2B&#xff08;Business to Business&#xff09; 定义&#xff1a;B2B 模式是指企业与企业之间的商业交易。在这种模式下&#xff0c;企业通过电子商务平台相互提供产品或服务。 特点&#xff1a; 大宗交易&#xff1a;通常…

数据结构 ——— 顺序表和链表的区别以及各自的优缺点

目录 顺序表和链表的区别 一、存储空间上 二、下标的随机访问 三、任意位置插入或者删除元素 四、添加数据 五、应用场景 六、缓存利用率 顺序表和链表的优缺点 顺序表的缺点 链表的优点&#xff08;和顺序表的缺点对应&#xff09; 顺序表的优点 链表的缺点&#…

背包九讲——完全背包问题

目录 完全背包问题 问题定义 动态规划解法 状态转移方程 初始化 遍历顺序 三种解法&#xff1a; 朴素版——枚举k 进阶版——dp正推&#xff08;一维滚动数组&#xff09; 背包问题第三讲——完全背包问题 背包问题是一类经典的组合优化问题&#xff0c;通常涉及在限定…

简介openwrt系统下/etc/config/network文件生成过程

openwrt的network文件&#xff0c;或者说在/etc/config下的文件&#xff0c;都是动态生成的。 脚本的函数定义在package/base-files/files/lib/functions中&#xff0c;有以下几个文件&#xff1a; libraSVN:~/Wang_SP4/openwrt-d03dc49/package/base-files/files/lib/functi…

【Linux笔记】Linux命令与使用

博文将不断学习补充 学习参考博文&#xff1a; Linux命令大全&#xff1a;掌握常用命令&#xff0c;轻松使用Linux操作系统-CSDN博客 文件或目录操作命令 zip # zip是使用最多的文档压缩格式 # 方便跨平台使用&#xff0c;但是压缩率不是很高 zip指令未安装 安装zip yum ins…