JavaScript编写幻灯片

问题:创建一段带有幻灯片效果的JavaScript代码,要包含一个有4幅图片,设置定时器,每隔5秒切换一次图片,如果用户单击开始按钮,定时器启动,并开始进行图片切换,如果用户单击停止按钮,则停止定时器。

代码:

<body><div id="box"><img src="./img/1.jpg" alt=""></div><div id="btdiv"><button>开始</button><button>停止</button></div><script>var img = document.querySelector('#box img');var btns = document.querySelectorAll('button');console.log(box, btns);// 图片切换函数var index = 1;var timer = null;function text() {index++;if (index == 6) {index = 1;}img.src = `./img/${index}.jpg`}btns[0].onclick = function () {// text();clearInterval(timer);timer = setInterval(text, 1000);}btns[1].onclick = function () {clearInterval(timer);}</script>
</body>

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

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

相关文章

Java实战:Spring Boot接口重试机制实现

本文将详细介绍如何在Spring Boot应用程序中实现接口重试机制。我们将探讨重试机制的基本概念&#xff0c;以及如何使用Spring Boot和第三方库来实现接口的重试功能。此外&#xff0c;我们将通过具体的示例来展示如何在Spring Boot应用程序中配置和使用接口重试机制&#xff0c…

python数据类型及转换

一、数据类型 数据类型分为数值型、布尔型、字符串型等 1.1数值类型 数值类型可以分为整数类型、浮点数类型、复数类型 1.1.1整数类型 (1)概念&#xff1a;整数类型指数值是没有小数部分的&#xff0c;包含正整数、负整数和0 (2)进制种类&#xff1a;十进制--->234、5…

Effective C++ 学习笔记 条款08 别让异常逃离析构函数

C并不禁止析构函数吐出异常&#xff0c;但它不鼓励你这样做。这是有理由的&#xff0c;考虑以下代码&#xff1a; class Widget { public:// ...~Widget() { /* ... */ } // 假设这个可能吐出一个异常 };void doSomething() {std::vector<Widget> v;// ... } // v…

【网站项目】139选课排课系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

Redis 群集

简介 在现在的互联网大潮中&#xff0c;NoSQL可谓家喻户晓&#xff0c;Redis作为NoSOL大军中极其重要的一员&#xff0c;是我们走向架构道路的一条必经之路。 Redis介绍 Redis 数据库是一个非关系型数据库&#xff0c;在正式学习Redis之前&#xff0c;我们先来了解关系型数据库…

算法沉淀——动态规划之完全背包问题(leetcode真题剖析)

算法沉淀——动态规划之完全背包问题 01.【模板】完全背包02.零钱兑换03.零钱兑换 II04.完全平方数 完全背包问题是背包问题的一种变体&#xff0c;与01背包问题不同&#xff0c;它允许你对每种物品进行多次选择。具体来说&#xff0c;给定一个固定容量的背包&#xff0c;一组物…

TCPDump 使用教程

每次服务器网络不通的时候&#xff0c;总会听到一个声音&#xff0c;你去抓包啊&#xff0c;那这里就来介绍下TCPDump&#xff0c;一款强大的网络分析工具&#xff0c;可以捕获网络上的数据包&#xff0c;并进行分析。这款工具在网络管理员和安全专家中非常受欢迎。 一、安装 …

防火墙:网络防御的第一道防线

目录 引言 一、安全技术与防火墙 &#xff08;一&#xff09;安全技术 &#xff08;二&#xff09;防火墙的主要功能与分类 1.防火墙的主要功能 2.防火墙的分类 二、Linux防火墙的基本认识 &#xff08;一&#xff09;Netfilter &#xff08;二&#xff09;防火墙工具…

单调队列(347. 前 K 个高频元素239. 滑动窗口最大值)

单调队列和单调栈其实差不多,就是维护一个区间单调的队列或者是栈,单调队列就是我们所说的大顶堆小顶堆, //升序队列 小顶堆 great 小到大 priority_queue <int,vector<int>,greater<int> > pri_que; //降序队列 大顶堆 less 大到小 默认 priority_qu…

【AI视野·今日NLP 自然语言处理论文速览 第八十一期】Mon, 4 Mar 2024

AI视野今日CS.NLP 自然语言处理论文速览 Mon, 4 Mar 2024 Totally 48 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Mitigating Reversal Curse via Semantic-aware Permutation Training Authors Qingyan Guo, Rui Wang, Junlia…

Fisher矩阵与自然梯度法

文章目录 Fisher矩阵及自然梯度法Fisher矩阵自然梯度法总结参考链接 Fisher矩阵及自然梯度法 自然梯度法相比传统的梯度下降法具有以下优势&#xff1a; 更好的适应性&#xff1a;自然梯度法通过引入黎曼流形上的梯度概念&#xff0c;能够更好地适应参数空间的几何结构。这使…

今日学习总结2024.3.3

今天也是全天自习的一天&#xff0c;非常充实 早上八点开始接着晚上的docker配置&#xff0c;并一边同步博客&#xff0c;还是遇到了卡壳看了一个视频&#xff0c;里面提到了物联网&#xff0c;感觉对这个概念更加了解了&#xff0c;当年填报专业志愿的时候有将物联网工程放在…

LCR 134. Pow(x, n)

解题思路&#xff1a; 分治 快速幂 Java中向下取整n/2即可 需要结合下图理解&#xff0c;算法就是实现的该过程 class Solution {public double myPow(double x, int n) {if(x 0.0f) return 0.0d;long b n;double res 1.0;//例如:2^-5(1/2)^5if(b < 0) {x 1 / x;b -b…

Python中可迭代数据类型

有序集合 有序的集合包括&#xff1a;列表、字符串以及元组。 对于任意Python序列可应用的运算&#xff1a; 运算名运算符解释长度len(sequence)返回序列的长度。索引访问sequence[i]返回索引 i 处的元素。切片sequence[i:j]返回从索引 i 到 j 的子序列。成员检查item in seq…

访问⾸⻚的速度很慢,有哪些⽅法可以提⾼访问速度?

1. 减少HTTP请求 可以通过简化页面设计&#xff0c;减少页面中图片、样式表、JavaScript等组件的数量来降低HTTP请求次数。此外&#xff0c;合并文件也是一个有效的方法&#xff0c;即将所有脚本或样式表文件合并为一个文件&#xff0c;和使用图片精灵以减少请求的数量。 2. …

【Python】Python教师/学生信息管理系统 [简易版] (源码)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

accept()函数

accept 函数是用于在服务器端接受客户端连接的系统调用。以下是 accept 函数的详细解读&#xff1a; #include <sys/types.h> #include <sys/socket.h>int accept(int sockfd, struct sockaddr *addr, socklen_t *addrlen);sockfd&#xff1a; 是一个已经通过 soc…

京东商品优惠券API获取商品到手价

item_get_app-获得JD商品详情原数据 公共参数 请求地址: jd/item_get_app 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff08;包括在请求地址中&#xff09;[item_search,i…

MATLAB环境下基于区域椭圆拟合的细胞分割方法

使用图像分割技术可以找到图像中的目标区域&#xff0c;目标区域可以定义为具有特定值的单个区域&#xff0c;也可以定义为具有相同值的多个区域。目前图像分割已经融入到生活中的方方面面&#xff0c;在遥感领域&#xff0c;它应用于航拍图中的地形、地貌的分割&#xff1b;在…

高可用架构实现流量治理的策略

一 概述 1.1 高可用评判指标 1.平均故障间隔&#xff08;Mean Time Between Failure&#xff0c;简称 MTBF&#xff09;&#xff1a;表示两次故障的间隔时间&#xff0c;也就是系统正常运行的平均时间&#xff0c;这个时间越长&#xff0c;说明系统的稳定性越高&#xff1b; …