元素的属性设置
1.目标
掌握图片的src属性的设置
在页面使用img标签显示一张图片, 点击这个图片更换一张新的图片
2.实现思路
- 使用img 指定src =“路径” 指定id=“one”
- 获取img标签， 添加onclick 点击事件
- 在事件处理程序函数体中修改图片的src的值
3.代码实现
// 1.获取图片var img = document.getElementById("one");// 2.给img添加点击事件img.onclick = function () {// 修改图片的src// console.log(img.src);img.src = './imgs/zxc.jpg'}
4.总结
元素对象.属性名 访问对象上的属性
元素对象.属性名 = “值” 给对象上的属性修改内容
5.图片切换的案例
1.目标
掌握图片切换案例
页面上使用img标签显示一张图片, 点击这张图片可以随机更换新的图片
2.实现思路
- 定义数组，存放所有图片的路径 值是字符串
- 封装从min，max之间的随机数, min max 数组的下标 [0, 数组的长度-1]
- 调用随机数函数，得到随机下标 数组名[随机下标] 得到随机图片路径
- 给图片元素对象的src赋值
3.代码实现
// 1.获取图片var img = document.getElementById("one");// 定义数组 保存所有图片的路径var arr = ['./imgs/1.jpg','./imgs/2.jpg','./imgs/3.jpg','./imgs/4.jpg','./imgs/5.jpg','./imgs/6.jpg','./imgs/7.jpg','./imgs/8.jpg','./imgs/9.jpg','./imgs/10.jpg','./imgs/11.jpg'];// 2.给img添加点击事件img.onclick = function () {// 修改图片的src// console.log(img.src);// img.src = './imgs/1.jpg'// 获取随机下标 var index = random(0, arr.length-1);img.src = arr[index];// console.log(arr[index]);}function random (min,max) {return Math.floor(Math.random() * (max - min +1) +min);}4.总结
1.随机数封装
function 函数名 (min, max) {return Math.floor(Math.random() * (max - min + 1) + min)
}
2.数组的访问 数组名[下标] 随机数生成下标 [0, 数组的长度-1]
)