js实现简单的随机切换图片功能_javascriptdom自动随机切换图片-优快云博客

本文链接：https://blog.youkuaiyun.com/fuyao_ipg/article/details/107492311

使用js实现随机切换图片

准备好要用的图片；
开始操作；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机切换图片</title>
</head>
<body>
    <div style="width: 500px; height: 500px; margin: 50px auto;">
        <img id="images" style="width: 500px; height: 500px;" src="./images/01.jpg" alt="">
    </div>
    
    <div id="button" style="cursor: pointer; width: 100px;text-align: center;margin: 0 auto; padding: 10px; border: 1px solid black;">切换图片</div>

    <script>
        var images = document.getElementById('images'); //获取id为images的元素

        var button = document.getElementById('button');//获取id为button的元素
        
        //创建图片路径的数组
        var img_list = ["./images/01.jpg","./images/02.jpg","./images/03.jpeg","./images/04.jpg","./images/5.jpg","./images/6.jpg","./images/7.jpg","./images/8.jpg","./images/9.jpg","./images/10.jpg","./images/11.jpg","./images/12.jpg","./images/13.jpg","./images/14.jpg",];
       
        //给button绑定点击事件
        button.onclick = function(){
            /*
            Math.floor()方法为乡下取整
            Math.random()方法为获取随机数
            数组.length方法为获取数组的长度
            元素.src方法为获取元素的src属性
            */
            var random = Math.floor(Math.random()*img_list.length);//创建随机整数

            images.src = img_list[random];//以随机出来的整数作为img_list数组的下标来访问图片路径
        }
    </script>
</body>
</html>

完事