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

Javascript - 轮播图

news 文章来源：https://blog.csdn.net/weixin_48591974/article/details/133625047 2025/1/21 10:21:27

   轮播图也称banner图、广告图、焦点图、滑片。是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片。这些图片统称为轮播图,这个模块叫做轮播模块。可以通过运用 javascript去实现定时自动转换图片。以下通过一个小Demo演示如何运用Javascript实现。



  



<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="轮播图.css"><title>Document</title>
</head>
<body><img id="imgShow" src="./1.jpg" alt=""></body>
<script>let imgShow = document.getElementById('imgShow');let newArr = ['./1.jpg','./2.jpg','./3.jpg'];let i = 0;setInterval(() => {imgShow.src = newArr[i];i++;if (i == newArr.length) {i = 0;}}, 1000)</script>
</html>


轮播图

相关文章：

Javascript - 轮播图

轮播图也称banner图、广告图、焦点图、滑片。是指在一个模块或者窗口,通过鼠标点击或手指滑动后,可以看到多张图片。这些图片统称为轮播图,这个模块叫做轮播模块。可以通过运用 javascript去实现定时自动转换图片。以下通过一个小Demo演示如何运用Javascript实现。 <!DOCTYP…...

编程日记 2023/10/7 5:23:30

MATLAB中syms函数使用

目录 语法 说明 示例 创建符号标量变量 创建符号标量变量的向量 创建符号标量变量矩阵 管理符号标量变量的假设 创建和评估符号函数 syms函数的作用是创建符号标量和函数&#xff0c;以及矩阵变量和函数。 语法 syms var1 ... varN syms var1 ... varN [n1 ... nM] …...

编程日记 2023/10/7 5:22:29

竞赛选题 深度学习 opencv python 实现中国交通标志识别_1

文章目录 0 前言1 yolov5实现中国交通标志检测2.算法原理2.1 算法简介2.2网络架构2.3 关键代码 3 数据集处理3.1 VOC格式介绍3.2 将中国交通标志检测数据集CCTSDB数据转换成VOC数据格式3.3 手动标注数据集 4 模型训练5 实现效果5.1 视频效果 6 最后 0 前言 &#x1f525; 优质…...

编程日记 2023/10/7 5:21:28

Qt 关于mouseTracking鼠标追踪和tabletTracking平板追踪的几点官方说明

mouseTracking属性用于保存是否启用鼠标跟踪&#xff0c;缺省情况是不启用的。 没启用的情况下&#xff0c;对应部件只接收在鼠标移动同时至少一个鼠标按键按下时的鼠标移动事件。 启用鼠标跟踪的情况下&#xff0c;任何鼠标移动事件部件都会接收。 部件方法hasMouseTrackin…...

编程日记 2023/10/7 5:20:28

基于springboot的论坛网站

目录 前言 一、技术栈 二、系统功能介绍 用户信息管理 普通管理员管理 交流论坛 交流论坛评论 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了…...

编程日记 2023/10/7 5:16:24

分库分表理论总结

一、概述 分库分表是在面对高并发、海量数量时常见的数据库层面的解决方案。通过把数据分散到不同的数据库中&#xff0c;使得单一数据库的数据量变小来缓解单一数据库的性能问题&#xff0c;从而达到提升数据库性能的目的。比如&#xff1a;将电商数据库拆分为若干独立的数据…...

编程日记 2023/10/7 5:14:23

RK3568平台开发系列讲解（外设篇）AP3216C 三合一环境传感器驱动

🚀返回专栏总目录 文章目录 一、AP3216C 简介二、AP3216C驱动程序2.1、设备树修改2.2、驱动程序沉淀、分享、成长，让自己和他人都能有所收获！😄 📢在本篇将介绍AP3216C 三合一环境传感器的驱动。 一、AP3216C 简介 AP3216C 是由敦南科技推出的一款传感器，其支持环境光…...

编程日记 2023/10/7 5:13:22

ES 关于 remote_cluster 的一记小坑

最近有小伙伴找到我们说 Kibana 上添加不了 Remote Cluster&#xff0c;填完信息点 Save 直接跳回原界面了。具体页面&#xff0c;就和没添加前一样。 我们和小伙伴虽然隔着网线但还是进行了深入、详细的交流&#xff0c;梳理出来了如下信息&#xff1a; 两个集群&#xff1a;…...

编程日记 2023/10/7 5:11:19

第五章：最新版零基础学习 PYTHON 教程—Python 字符串操作指南（第四节 - Python 中的字符串反转6种不同的方式方法）

Python 字符串库不支持内置的“ reverse() ”，就像其他 python 容器（如 list）所做的那样，因此了解其他反转字符串的方法可能会很有用。本文讨论了在Python中实现它的几种方法。 目录 Python 中使用循环反转字符串 在Python中使用递归反转字符串...

编程日记 2023/10/7 5:08:16

el-date-picker增加默认值 修改样式

预期效果 默认是这样的 但希望是直接有一个默认的当天日期&#xff0c;并且字体颜色啥的样式也要修改&#xff08;在这里假设今天是2023/10/6 功能实现 踩了坑挺多坑的&#xff0c;特此记录 官方文档 按照官方的说明&#xff0c;给v-model绑定一个字符串就可以了 在j…...

编程日记 2023/10/7 5:07:15

Hive中生成自增序列的常用方法

在日常业务开发过程中&#xff0c;通常遇到需要hive数据表中生成一列唯一ID&#xff0c;当然连续递增的更好。 最近在结算业务中&#xff0c;需要在hive表中生成一列连续且唯一的账单ID&#xff0c;于是就了解生成唯一ID的方法 1. 利用row_number函数 语法&#xff1a;row_n…...

编程日记 2023/10/7 5:06:14

4.MySql安装配置(更新版)

MySql安装配置 无论计算机是否有安装其他mysql&#xff0c;都不要卸载。 只要确定大版本是8即可&#xff0c;8.0.33 8.0.34 差别不大即可。 MySql下载安装适合电脑配置属性有关&#xff0c;一次性安装成功当然是非常好的&#xff0c;因为卸载步骤是非常麻烦的 如果第一次安装…...

编程日记 2023/10/7 5:05:13

使用opencv及FFmpeg编辑视频

使用opencv及FFmpeg编辑视频 1.融合两个视频2.为视频添加声音2.1 安装ffmpy Python包2.2 下载ffmpeg2.3 代码实现 3.效果参考文献 帮朋友做了一个小作业&#xff0c;具体实现分为几个过程&#xff1a; 将两个mp4格式视频融合到一起为新视频添加声音 1.融合两个视频 其中一个…...

编程日记 2023/10/7 5:04:12

Python3 Selenium4 chromedriver Pycharm闪退的问题

Python3版本&#xff1a;3.11.5 Pycharm版本&#xff1a;2023.2.1 Chrome版本&#xff1a;117.0.5938.150&#xff08;正式版本&#xff09; 在使用最新版的Selenium4版本时&#xff0c;chromedriver可以驱动Chrome但是闪退&#xff0c;Selenium目前最新版本是4.13.0&#…...

编程日记 2023/10/7 5:01:10

019 基于Spring Boot的教务管理系统、学生管理系统、课表查询系统

基于Spring Boot的教务管理系统、学生管理系统、课表查询系统 一、系统介绍 本作品主要实现了一个课表查询系统&#xff0c;采用了SSM&#xff08;Spring SpringMVC MyBatis&#xff09;的基础架构。 二、使用技术 spring-bootspring-MVCthymeleafmybatis-plusdruidLombo…...

编程日记 2023/10/7 4:59:09

包装类？为什么需要包装类？

包装类是一种用于将基本数据类型（如整数、浮点数、字符等）封装成对象的类。在Java和许多其他编程语言中，基本数据类型是不具备面向对象特性的，它们不是对象，不能进行方法调用或参与泛型化。为了弥补这一不足，Java引入了包装类，允许基本数据类型被当作对象来处理。 Java…...

编程日记 2023/10/7 4:58:08

Java中的TCP通信（网络编程 二）

简介 TCP&#xff08;传输控制协议&#xff09;是一种在计算机网络中常用的协议&#xff0c;它提供了可靠的、面向连接的通信&#xff08;协议信息链接&#xff1a;TCP协议&#xff09;。在Java中&#xff0c;我们可以使用Socket和ServerSocket类来实现TCP通信。 Java TCP通信…...

编程日记 2023/10/7 4:57:07

[架构之路-232]：目标系统 - 纵向分层 - 操作系统 - 数据存储：文件系统存储方法汇总

目录 前言&#xff1a; 一、文件系统存储方法基本原理和常见应用案例&#xff1a; 二、Windows FAT文件系统 2.1 概述 三、Linux EXT文件系统 3.1 基本原理 3.2 索引节点表&#xff08;Inode Table&#xff09; 3.2.1 索引节点表层次结构 3.2.2 间接索引表的大小和表项…...

编程日记 2023/10/7 4:56:06

【立体视觉（五）】之立体匹配与SGM算法

【立体视觉&#xff08;五&#xff09;】之立体匹配与SGM算法 一、立体匹配一&#xff09;基本步骤二&#xff09;局部立体匹配三&#xff09;全局立体匹配四&#xff09;评价标准1. 均方误差(RMS)2. 错误匹配率百分比(PBM) 二、半全局(SGM)立体匹配一&#xff09;代价计算二&a…...

编程日记 2023/10/7 4:54:03

苹果系统_安装matplotlib__pygame,以pycharm导入模块

为了更便捷、连贯的进行python编程学习&#xff0c;尽量在开始安装python软件时&#xff0c;将编辑器、模块一并安装好&#xff0c;这样能避免以后版本冲突的问题。小白在开始安装pycharm、pip、matplotlib往往会遇到一些问题&#xff0c;文中列示其中部分bug&#xff0c;供大家…...

编程日记 2023/10/7 4:49:59

常用颜色的英文和十六进制

以下颜色都是按照下面格式所写 # size&#xff1a;文字大小&#xff08;1~7&#xff09;&#xff1b;color&#xff1a;文字颜色 <font size5 colorred>红 red #ff0000</font>红 red #ff0000 橙 orange #ffa500 黄 yellow #ffff00 草绿 springgreen #00FF7F 绿…...

编程日记 2023/10/7 4:47:55

计算机网络第二章思考题

1. 调制与编码分别有何作用&#xff1f; 调制&#xff08;Modulation&#xff09;和编码&#xff08;Coding&#xff09;是通信系统中的两个关键概念&#xff0c;它们分别具有不同的作用和功能&#xff1a; 调制&#xff08;Modulation&#xff09;&#xff1a; 作用&#xff…...

编程日记 2023/10/7 4:44:51

Xcode、终端、Mason、nvim.debug环境路径

Xcode&#xff1a; /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk/usr/include 终端&#xff1a; /Library/Developer/CommandLineTools/usr/include Mason: /Users/donny/.local/share/nvim/mason/packages/clangd/…...

编程日记 2023/10/7 4:41:47

2023华为OD机试真题-2023(A+B卷)【Java、C++、Go、Python】

【华为OD机试真题-2023(A+B卷)【Java、C++、Go、Python】 该专栏博客已帮助千余名同学通过OD机考 2023年5月，华为OD机考更新为OD统一考试（B卷）。B卷的题目包括两部分： 1.2022年老题库 2.2023新增题目 OD统一考试B卷的题目博主也会及时搜集更新！ 以下为OD统一考试(B卷…...

编程日记 2023/10/7 4:37:43

[NISACTF 2022]join-us - 报错注入无列名注入

点击登录&#xff0c;找到注入点 这种框&#xff0c;可以直接爆破关键字&#xff0c;看是否拦截&#xff0c;也可以手动尝试&#xff0c;发现、union、and、or、substr、database等关键字都拦截了 1、学到了&#xff1a;可以用数据库中不存在的表名或者不存在的自定义函数名爆…...

编程日记 2023/10/7 4:36:42

Raid10--Raid01介绍

RAID10　　先对磁盘做mirror&#xff0c;然后对整个mirror组做条带化&#xff1b; 　　 比如8块盘 　　 需要分成4个基组&#xff0c;每个基组2块盘&#xff1b; 　　 每个基组先做raid1&#xff0c;再做raid0&#xff0c;4条条带化&#xff1b; 　　 所以&#xff1a; 　　…...

编程日记 2023/10/7 4:32:39

集群服务器

文章目录 项目名:实现集群服务器技术栈通过这项目你学到(或者复习到)实现功能编码环境json环境muduo库boost库MySql数据库登录mysql&#xff1a;查看mysql服务开启了没有&#xff1f;mysql的服务器及开发包库chat&#xff0c;表 allgroup friend groupuser offlinemessage user…...

编程日记 2023/10/7 4:31:38

大数据Doris（五）：开始编译 Doris

文章目录 开始编译 Doris 一、下载Doris的安装包 二、解压缩 三、上传配置文件...

编程日记 2023/10/7 4:28:36

Linux软硬链接和动静态库

本文已收录至《Linux知识与编程》专栏&#xff01; 作者&#xff1a;ARMCSKGT 演示环境&#xff1a;CentOS 7 软硬链接和动静态库 前言正文软硬链接原理使用 文件时间动静态库库介绍静态库静态库制作静态库的使用关于静态链接 动态库动态库制作动态库的使用关于动态链接 补充 最…...

编程日记 2023/10/7 4:27:35

Linux shell编程学习笔记6：查看和设置变量的常用命令

上节我们介绍了变量的变量命名规则、变量类型、使用变量时要注意的事项&#xff0c;今天我们学习一下查看和设置变量的一些常用命令&#xff0c;包括变量的提升&#xff0c;有些命令在之前的实例中已经使用过了。 一、 echo &#xff1a;查看变量的值 语法格式&#xff1a;ech…...

编程日记 2023/10/7 4:26:33

大型电子商务网站建设/湖南关键词排名推广

我已经编写了这段代码&#xff0c;以便使用检查用户名和密码的bean和servlet从jsp登录。从mysql数据库。代码如下&#xff1a;index.jsp:/p>"http://www.w3.org/TR/html4/loose.dtd">body {background-color:#AFC7C7;padding: 0;margin: 0;}div.wrapper {margi…...

编程日记 2025/1/21 6:59:22

如何建设淘客网站/网站推广的100种方法

一、...

编程日记 2025/1/20 23:03:25

软件开发平台是什么/郑州seo询搜点网络效果佳

一、问题的引出 《C和指针》关于“联合”一章中提到“联合变量可以被初始化&#xff0c;但这个初始值必须是联合第1个成员的类型”。 就这个问题&#xff0c;我有两点疑问&#xff1a;这里的‘初始化’是指在定义时对变量赋值吗&#xff1f;在定义之后是否可以显示地对其他成员…...

编程日记 2025/1/20 22:47:05

分销网站开发/电商培训内容

微信公众号文章公开了阅读数和点赞数&#xff0c;那它们是怎么算出来的呢&#xff1f;昨天测试了一下用pc端浏览器打开刷新多次&#xff0c;然后再用手机端看数字有没变化&#xff0c;结果貌似不行&#xff0c;看来微信团队早就想到这点了。那我们一起来看看有哪些方式才算一次…...

编程日记 2025/1/20 22:38:56

自己做单词卡的网站是什么/友情链接怎么弄

大家好&#xff0c;我是飞哥&#xff01;经常在后台收到读者的交流&#xff0c;Linux 源码那么庞大&#xff0c;飞哥你是如何读的呢&#xff1f;由于问这个问题的太多&#xff0c;我想有必要专门写一篇文章聊一聊。首先&#xff0c;我先说一点&#xff0c;其实我本人不是搞内核…...

编程日记 2025/1/20 18:33:59

一个叫mit做app的网站/自助建站系统平台

spark SQL 性能调整 对于某些工作负载&#xff0c;可以通过在内存中缓存数据或打开一些实验选项来提高性能。 1&#xff0c;在内存中缓存数据Spark SQL可以通过调用spark.catalog.cacheTable("tableName")或使用内存中的列格式缓存表dataFrame.cache()。然后&#xf…...

编程日记 2025/1/20 15:28:07