前言

利用js实现一个图片自动切换的功能。

一、基本思路

将准备好的多张图片的地址存储到一个数组中去，然后通过调用循环定时器来遍历数组，修改图片的src属性，进而实现图片的自动切换。

二、代码分析

1.创建数组保存图片的存储路径

这里除了创建一个数组外还要定义一个变量来存储当前图片的索引，我们之后是通过这个索引来切换相应的图片。

代码如下（示例）：

// 创建一个数组保存图片的路径
var imgArr = ["img/图片切换练习/1.webp","img/图片切换练习/2.webp","img/图片切换练习/3.webp","img/图片切换练习/4.webp","img/图片切换练习/5.webp","img/图片切换练习/6.webp",];
// 创建一个变量保存当前图片的索引。
var index = 0;

2.获取按钮对象

这里我们要先获取到按钮对象，然后再为其绑定单击响应函数。

代码如下（示例）：

// 获取img标签
var img = document.getElementById("img");
// 为btn01绑定单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){};
// 为btn02绑定单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){};

3.调用定时器

这里是实现这一功能的核心代码，当点击按钮1时开始切换图片，首先我们要定义一个全局变量timer来保存定时器的标识，用来方便我们随时关闭定时器。在调用定时器之前我们要先把上一次开启的定时器关闭，防止每次点击按钮时创建新的定时器，使我们的图片切换速度受到影响。

代码如下（示例）:

// 创建变量保存定时器标识。
var timer;
// 为btn01绑定单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){// 关闭当前元素上的上一个定时器clearInterval(timer);// 开启定时器自动切换图片timer = setInterval(function(){//使索引自增index++;if(index>=imgArr.length){index = 0;}//修改img中的src，实现图片自动切换img.src = imgArr[index];},1000);
}

4.关闭定时器

当点击按钮2时停止图片的切换。因此要将关闭定时器写在按钮2的单击响应函数里，这一步没有什么难度。

代码如下（示例）:

// 为btn02绑定单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){/*** 点击按钮以后，停止图片的自动切换，关闭定时器。*/clearInterval(timer);
};

三、整体代码

代码如下（示例）:

window.onload = function(){// 获取img标签var img = document.getElementById("img");// 创建一个数组保存图片的路径var imgArr = ["img/图片切换练习/1.webp","img/图片切换练习/2.webp","img/图片切换练习/3.webp","img/图片切换练习/4.webp","img/图片切换练习/5.webp","img/图片切换练习/6.webp",];// 创建一个变量保存当前图片的索引。var index = 0;// 创建变量保存定时器标识。var timer;// 为btn01绑定单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){// 关闭当前元素上的上一个定时器clearInterval(timer);// 开启定时器自动切换图片timer = setInterval(function(){//使索引自增index++;if(index>=imgArr.length){index = 0;}//修改img中的src，实现图片自动切换img.src = imgArr[index];},1000);};// 为btn02绑定单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function(){/*** 点击按钮以后，停止图片的自动切换，关闭定时器。* clearInterval()可以接收任意类型的参数。*/clearInterval(timer);};};

四、效果展示

如图所示（示例）：

以上就是今天的主要内容，主要是介绍了利用定时器来实现一个图片自动切换的小功能。

js实现点击按钮图片自动切换_☆往事随風☆的博客相关推荐

js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
JS实现点击按钮图片左右切换、点击图片按钮出现下拉菜单
前天帮人做个网页作业,大概要求就是使用两个按钮控制图片的切换,在页面右上角出现一个图片按钮,点击这个按钮出现下拉菜单. 第一个要求还是很简单的,第二个多花了我几个小时的时间,因为我只做过select下 ...
BootStrap使用方法为BootStrap3添加jquery.min.js文件（简单易懂）_☆往事随風☆的博客
为BootStrap3添加jquery.min.js文件一.前言二.BootStrap简介三.BootStrap3的使用方法 (1)先去官网找到BootStrap3这个版本的文档. (2)配置B ...
js实现键盘控制div移动（可加速）_☆往事随風☆的博客
文章目录前言一.基本思路二.代码分析 1.首先为div开启绝对定位 2.为document绑定键盘按下和抬起事件 3.获取对应键盘的Unicode编码 4.设置变量保存速度和键盘Unicode编 ...
vue论坛网站的文章自动排版_基于 VuePress 定制个人博客网站
VuePress 简单来说,VuePress 是 Vue 驱动的静态网站生成器.VuePress 简单易上手,同时也有足够强大的定制能力,尤其对熟悉 Vue 的前端开发人员而言.相比于知名的博客生成器 ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果
今天来分享一下[鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码]. 最后的效果如下: Html代码部分: <!doctype html>&l ...
html5轮播怎么自动换图,js实现轮播图效果纯js实现图片自动切换
本文实例为大家分享了纯js实现图片自动切换的具体代码,供大家参考,具体内容如下 1.鼠标经过的时候左右两个小按钮会自动弹出,自动播放停止,点击左右小按钮可以切换图片: 2. 鼠标离开,恢复自动播放: ...
html 点击按钮js自增,JS实现点击按钮自动增加一个单元格的方法
本文实例讲述了JS实现点击按钮自动增加一个单元格的方法.分享给大家供大家参考.具体分析如下: 这是一个网页在线自助生成表格的特效代码. 核心功能代码是JS实现,点击网页中的添加按钮,网页中自动增加一个 ...

js实现点击按钮图片自动切换_☆往事随風☆的博客

文章目录

前言

一、基本思路

二、代码分析

1.创建数组保存图片的存储路径

2.获取按钮对象

3.调用定时器

4.关闭定时器

三、整体代码

四、效果展示

js实现点击按钮图片自动切换_☆往事随風☆的博客相关推荐

最新文章

热门文章