js利用数组创建图片对象

简介: 个人学习,练习代码。欢迎批评指正。 在本地操作,轮播图片时,有时需要两张以上图片轮播,即一组一组的切换,一张一张的取太麻烦,于是想到是否可以存储在数组中去调用呢。 于是找打了一个方法: 1.定义一个数组(存放图片地址) imgArr = [['img/01.jpg','img/02.jpg','img/03.jpg','img/04.jpg'],['img/05.jpg','

个人学习,练习代码。欢迎批评指正大笑


在本地操作,轮播图片时,有时需要两张以上图片轮播,即一组一组的切换,一张一张的取太麻烦,于是想到是否可以存储在数组中去调用呢。

于是找打了一个方法:

1.定义一个数组(存放图片地址)

imgArr = [['img/01.jpg','img/02.jpg','img/03.jpg','img/04.jpg'],['img/05.jpg','img/06.jpg','img/07.jpg','img/08.jpg'],['img/09.jpg','img/10.jpg','img/11.jpg','img/12.jpg']];

如上建立了一个二位数组,存放了三组图片以备用;


2.定义一个函数(将数组转换为image对象)

function trImg(arr){
	var imgAll = []; <span style="white-space:pre">					</span>//定义一个空数组用于存放转换后的对象
	for(var i in arr){
		imgAll[i]=[];<span style="white-space:pre">					</span>//二维数组(很重要)
		for(var j in arr[i]){
			imgAll[i][j] = new Image();<span style="white-space:pre">		</span>//将新数组的每个对象定义为图片对象
			imgAll[i][j].src = arr[i][j];<span style="white-space:pre">		</span>//定义图片对象的地址为原数组中的图片地址
		}
	}
	return imgAll;
}


3.检查生成的对象

alert(imgAuto[0][0]);
弹出Object HTMLImageElement

已经将我们创建的数组地址转换为图片对象了。

大笑


目录
相关文章
|
23天前
|
JavaScript 前端开发
JavaScript遍历数组和对象常用方法总结
以上代码展示了数组和对象的多种遍历方法。对于数组,使用了传统的 `for` 循环、`for...in` 和 ES6 的 `for...of` 进行遍历;对于对象,则通过 `for...in`、`Object.keys()`、`Object.values()` 和 `Object.entries()` 来获取键值对。`for...of` 循环适用于遍历具有迭代协议的数据结构,如数组、字符串等,而对象遍历则更多地依赖于 `Object` 方法来获取其属性集合。
JavaScript遍历数组和对象常用方法总结
|
9天前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
|
29天前
|
前端开发 JavaScript 开发者
【前端开发者的福音】彻底改变你编码习惯的神奇数组迭代技巧——从基础到进阶,解锁 JavaScript 数组迭代的N种姿势!
【8月更文挑战第23天】在Web前端开发中,数组是JavaScript中最常用的数据结构之一,掌握高效的数组迭代方法至关重要。本文详细介绍了多种数组迭代技巧:从基础的`for`循环到ES6的`for...of`循环,再到高阶方法如`forEach`、`map`、`filter`、`reduce`及`some`/`every`等。这些方法不仅能提高代码的可读性和维护性,还能有效优化程序性能。通过具体的示例代码,帮助开发者更好地理解和运用这些迭代技术。
25 0
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-数组的遍历
关于JavaScript数组遍历基础知识的文章。
27 2
JavaScript基础知识-数组的遍历
|
3天前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-数组的练习
关于JavaScript基础知识中数组操作的练习,主要介绍了如何从一个包含Person对象的数组中过滤出成年人(年龄达到18岁及以上)并将他们放入一个新的数组中。
25 1
JavaScript基础知识-数组的练习
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
15 1
JavaScript基础知识-数组的常用方法
|
18天前
|
JavaScript 前端开发 索引
JavaScript基础知识-数组基于索引访问
关于JavaScript数组基于索引访问的基础知识介绍。
13 1
JavaScript基础知识-数组基于索引访问
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-数组的定义方式
本文介绍了JavaScript中数组的多种定义方式。
12 1
JavaScript基础知识-数组的定义方式
|
18天前
|
JavaScript 前端开发
JavaScript基础知识-枚举对象中的属性
关于JavaScript基础知识中如何枚举对象属性的介绍。
24 1
JavaScript基础知识-枚举对象中的属性