js实现点击按钮更换图片，用的创建元素节点方法

最新推荐文章于 2023-01-23 11:32:12 发布

萝卜头888

最新推荐文章于 2023-01-23 11:32:12 发布

阅读量706

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/wocao2dai/article/details/119992779

版权

html5 html javascript

js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

这个有使用：

-------------新增节点createElement('标签名')方法；

-------------插入节点A.appendChild(B),把B节点追加至A节点的末尾。

-------------修改节点replaceChild(新节点，被替换节点)

具体代码实现：

需要更换图片，不然看不到图片。

鼠标悬停在图片上，可以看目前图片是第几张。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 300px;
            height: 300px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid black;width: 300px;height: 300px;"></div>
    <input type="button" value="更换图片"/>
    <script>
        onload=function(){
            //获取div盒子
            var div=document.querySelector('div');
            //获取点击按钮
            var an=document.querySelector('input');
            //创建图片节点
            var tu=document.createElement('img')
            //设置图片地址，这个图片需要更换，才能显示，需要把图片放在一个文件里
            tu.setAttribute('src','./imgs/mzi.jpg')
            tu.setAttribute('title','第一张')
            //同样也是创建图片节点
            var tu1=document.createElement('img')
            //设置图片地址
            tu1.setAttribute('src','./imgs/qzi.jpg')
            tu1.setAttribute('title','第二张')
            var tu2=document.createElement('img')
            tu2.setAttribute('src','./imgs/wzi.jpg')
            tu2.setAttribute('title','第三张')
            var tu3=document.createElement('img')
            tu3.setAttribute('src','./imgs/xzi.jpg')
            tu3.setAttribute('title','第四张')
            var tu4=document.createElement('img')
            tu4.setAttribute('src','./imgs/yfu.jpg')
            tu4.setAttribute('title','第五张')
            //把图4放在div节点末尾，图片的起点
            div.appendChild(tu4)
            //定义一个变量
            var num=0;
            //点击事件
            an.onclick=function(){
                //判断变量
                if(num==0){
                    //如果num等于0，replaceChild用新节点替换指定的节点，这个属性有两个值；
                    //             第一个是新节点，第二个是被替换的节点
                    div.replaceChild(tu,tu4)
                    //让变量累加
                    num++;
                }else if(num==1){
                    div.replaceChild(tu1,tu)
                    num++;
                }else if(num==2){
                    div.replaceChild(tu2,tu1)
                    num++;
                }else if(num==3){
                    div.replaceChild(tu3,tu2)
                    num++;
                }else if(num==4){
                    div.replaceChild(tu4,tu3)
                    //让num重新等于0，这个是循环的关键。
                    num=0;
                }
            }
        }
        
        
    </script>
</body>
</html>