点击切换下一张图片

1.结构

<img src="1.jpg" alt=""><br>
<button>下一张</button>

2.样式

<style>
        body{
            text-align: center;
        }
        img{
            width: 300px;
        }
</style>

3.js部分

<script>
        //鼠标点击下一张 图片切换下一张
        //1.获取元素
        var img = document.getElementsByTagName('img')[0];
        var btn = document.getElementsByTagName('button')[0];
        console.log(img,btn);
         // 3. 当不知道起始值是谁的时候 假设一个变量存初始值
        var n = 1;
        //2.加事件
        btn.onclick = function() {
            n++;
            img.src = ''+ n +'.jpg'
        }
</script>

点击切换下一张图片

 

上一篇:this的使用


下一篇:92、多次点击按钮,隔一秒更新一次;获取dom元素下所有dom元素个数