webapi-元素的属性设置-图片切换的案例

元素的属性设置

1.目标

​ 掌握图片的src属性的设置

在页面使用img标签显示一张图片, 点击这个图片更换一张新的图片

2.实现思路

1. 使用img 指定src =“路径” 指定id=“one”
2. 获取img标签， 添加onclick 点击事件
3. 在事件处理程序函数体中修改图片的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.实现思路

1. 定义数组，存放所有图片的路径 值是字符串
2. 封装从min，max之间的随机数, min max 数组的下标 [0, 数组的长度-1]
3. 调用随机数函数，得到随机下标 数组名[随机下标] 得到随机图片路径
4. 给图片元素对象的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]