js实现幻灯片

news/2024/3/29 18:10:00/文章来源:https://www.cnblogs.com/jxweber/p/16635977.html

使用原生js实现轮播图

html代码

    <div class="slide"><ul><li style="display: block;"><img src="1.jpg"></li><li><img src="2.jpg"></li><li><img src="3.jpg"></li><li><img src="4.jpg"></li><li><img src="5.jpg"></li></ul><span class="pre"> < </span><span class="next"> > </span></div>

css代码

*{padding:0; margin: 0;}
ul,ol,li{list-style: none;}
img{vertical-align: top; border: none;}
a{text-decoration: none;}
body{font-size: 14px; font-family: '微软雅黑';}.slide{width: 250px;height: 90px;margin: 100px auto;position: relative;
}
.slide>ul>li{position: absolute;float: left;display: none;
}
.slide>ul>li:first-child{display:block;
}
.slide>ul>li>img{width:250px; height:90px;
}.slide>span{position:absolute;top:30px;background-color: rgba(0, 0, 0, 0.3);color: #fff;display:block;width: 20px; text-align: center;height:30px; line-height: 30px;
}
.slide>.pre{left:0;border-top-right-radius: 3px;border-bottom-right-radius: 3px;
}
.slide>.next{right: 0;border-top-left-radius: 3px;border-bottom-left-radius: 3px;
}

js代码

        let index = 0; //当前索引var pre = document.getElementsByClassName("pre")[0];var next = document.getElementsByClassName("next")[0];var lis = document.getElementsByClassName("slide")[0].children[0].children;next.onclick = function() {index++;for (let i = 0; i < lis.length; i++) {lis[i].style.display = "none";}// index = index + 1 == lis.length ? 0 : index;最后一张则回到第一张if (index == lis.length) {index = 0;}lis[index].style.display = "block";}pre.onclick = function() {index--;for (let i = 0; i < lis.length; i++) {lis[i].style.display = "none";}// index = index + 1 == lis.length ? 0 : index;第一张上一张则为最后一张if (index < 0) {index = lis.length - 1;}lis[index].style.display = "block";}function auto() {next.click();}let s = setInterval("auto()", 2000);for (let i = 0; i < lis.length; i++) {lis[i].onmouseenter = function() {clearInterval(s);}lis[i].onmouseleave = function() {s = setInterval("auto()", 2000);}}        

 

 

 

 

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

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

相关文章

字节跳动基于 ClickHouse 优化实践之“查询优化器”

更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群 相信大家都对大名鼎鼎的 ClickHouse 有一定的了解了,它强大的数据分析性能让人印象深刻。但在字节大量生产使用中,发现了 ClickHouse 依然存在了一定的限制。例如:缺少完整的 upsert…

echarts-dataset数据源配置项

如下效果图: 代码入下:let box4 = document.querySelector(.box4)let myCharts3 = echarts.init(box4)myCharts3.setOption({dataset:{// 二维数组存放数据source:[// 0 1 2 3 4 5 六个维度[衣服,22,15,36,35,18],[食品,60,39,50,15,22],[生活用品,60,52,36,15…

RN 调试

使用前先关闭debugger模式关闭谷歌,在打开调试工具,然后再打开debugger 1.使用谷歌浏览器来调试不能查看标签结构不能查看网络请求 2.使用rn推荐的工具react-native-debugger来调试https://github.com/jhen0409/react-native-debugger/releases可以查看标签结构不能查看网络请…

Excel聚光灯设置

1.同时按住 ALT+F11进入vba 2.双击要设置的sheet页 3.输入以下代码Private Sub Worksheet_SelectionChange(ByVal Target As Range)Cells.Interior.ColorIndex = xlNoneTarget.EntireRow.Interior.ColorIndex = 24Target.EntireColumn.Interior.ColorIndex = 24End Sub4.效果如…

【三维地图】开发攻略 —— 详解“GeoJSON”技术和应用场景

GeoJSON ,一个用于存储地理信息的数据格式。GoeJSON对象可以表示几何、特征或特征集合,支持:点、线、面、多点、多线、多面和几何集合。在基于平面地图,三维地图中都需要用到的一种数据类型。 由于这种格式在三维地图中的优秀属性,使用它我们不仅可以轻松实现地图类功能,…

JavaScript设计模式及代码实现——单例模式

单例模式1 定义保证一个类仅有一个实例,并提供一个访问它的全局访问点。2 应用时机当一个类的实例被频繁使用,如果重复创建这个实例,会无端消耗资源。比如 dialog 弹窗会被全局重复使用 业务功能本身决定了全局只能有唯一的实例。比如 redux 管理的数据,只能有唯一的一份3 …

ubuntu18.04屏幕录制Vokoscreen

Vokoscreen 可被视为具有良好分类菜单的简单屏幕录制机的更好 UI 版本。- 除了在simplescreenrecorder中包含的所有功能,Vokoscreen 还支持外部网络摄像头以及内置网络摄像头。 然而,它不支持在simplescreenrecorder中可用的 JACK 音频。 下载命令:sudo apt install vokoscr…

磁共振成像原理

目录1. 原子核的自旋2. 进动3. 磁共振现象4. 射频脉冲1. 原子核的自旋 原子有原子核和绕核运动的电子组成。 原子核的自旋:质子数和中子数一个为奇数、一个为偶数; 两者都为奇数这两种情况的原子核就会自旋。原子核是带正电,绕自旋轴旋转,效应相当于环形电流,周围会产生磁…

业务流程可视化-让你的流程图Run起来(7.运行状态持久化轻量工作流支持)

前言 感谢大家阅读本项目系列文章和对项目的支持。分享一下我对这个项目的新的改进。 之前项目做到了流程设计可视化和流程运行结果可视化。 本期发布的版本中实现了中间的运行过程的实时可视化,和流程状态持久化问题。 大家可以根据项目提供的接口自由扩展自己的工作流实现。…

DataGrip连接Mysql报08S01解决方案

以前正常使用的GataGrip,突然在某天报下面的错误提示:08S01 [08S01]Communications link failureThe last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server. No appropriate protocol (protocol is…

数据结构面试总结【第一弹】

数据结构面试总结 目录数据结构面试总结1.数据结构基本概念1.1 数据结构三要素2.线性表2.1 数组与链表有什么关系2.2 线性表的存储结构2.3 头指针和头节点的区别2.4 栈和队列的区别3.树3.1 度数为2的树与二叉树有什么区别3.2 唯一确定一棵二叉树3.3 二叉排序树3.4 最小生成树有…

优爱酷模拟点击自动翻页_自动展开所有批量网页转mhtml单网页保存

优爱酷模拟点击自动翻页_自动展开所有批量网页转mhtml#涨知识# 终于可以解放双手了! 1、页面有很多“折叠”的需要“展开”的内容,例如:点击查看全文,展开 等的网页,1个还好,多个“展开”如何解决?如果能#自动展开#岂不美哉? 2、普通网页翻页后链接会变化成不一样的,遇…

Ps 2022在M1 mac上导出 PNG 格式发生未知错误如何解决?

Photoshop 2022 for mac 在M1上导出 PNG 时,会提示“发生了未知错误”,即使点击“导出”按钮,导出的图片也是一个空白文件。小编教给大家 Ps 2021在 M1 mac上导出 PNG 格式发生未知错误的解决方法。1.打开 PhotoShop 的首选项 >常规,如下图所示:(也可以通过快捷键 Com…

图数据库入门教程(二)认识tinkerpop与gremlin

上一篇文章我们对图数据库有了一个简单的理解,对于关系的计算优雅而快速,适用与一些关系计算的场景,比如社交网络、金融反欺诈、商机发现、智能推荐等,想了解更多可以看一下阿里云gdb的文档https://help.aliyun.com/document_detail/112465.html。 当前图数据库天下的形式 …

设计模式之(3)——抽象工厂方法模式

定义:抽象工厂模式简单地讲,就是提供一个超级工厂,围绕这个超级工厂创建其他工厂;抽象工厂模式提供一个创建一些列相关或者相互依赖对象的接口;在此之前我们先来讲一下产品等级和产品族的概念;相同的产品等级就是相同的同一类的产品,比如美的冰箱、格力冰箱、海尔冰箱,…

Mysql----事务

《需求》 《操作》 《细节》

分类数据展示功能_缓存优化_分析

分类数据展示功能_缓存优化_分析 对数据进行一个缓存优化,分析发现:分类的数据在每一次页面加载后会重新请求数据库来加载,对数据库的压力比较大,而且这数据不会经常发送变化,可使用redis来缓存这个数据 分类数据展示功能_缓存优化_代码实现public class CategoryServiceI…

日常问题: 上线确认

作为开发,手头没事的时候,担心自己没参与大项目,年终没产出。而真正需求到来的时候,却是狂风暴雨一般,密集且时间紧迫。在紧锣密鼓996之后,终于迎来了上线。 但这一天不太顺利。背景 xxx正式上线。上线前,方案强调要开发把所有配置都给到他,他要确认下。当时觉得有问题…

第一个代码Hello World!

HelloWorld新建一个文件夹,存放代码新建一个Java文件 文件后缀为.java名为Hello.java[注意]要显示系统后缀名编写代码 public class Hello{ public static void main(String[] arge){ System.out.print("Hello,World!"); }} 打开cmd 路径需要是Hello.j…

Linux

1、关机命令命令 说明sync 将数据由内存同步到硬盘中shutdown 关机shutdown -h 10 10分钟后关机shutdown -h now 立马关机shutdown -h 20:25 指定时间关机shutdown -h +10 10分钟后关机shutdown -r now 系统立马重启shutdown -r +10 10分钟后重启reboot 重启,等于shutdown -r …