美文网首页webAPI
点击按钮切换对应图片

点击按钮切换对应图片

作者: 椋椋夜色 | 来源:发表于2019-05-07 22:56 被阅读0次

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 点击按钮切换对应图片 </title>

</head>

<body>

<!-- input[type=button value=第$张]*4 -->
<input type="button" value="第1张"title="01.jpg">
<input type="button" value="第2张"title="02.jpg">
<input type="button" value="第3张"title="03.jpg">
<input type="button" value="第4张"title="04.jpg">
<br>
<img src="../images/01.jpg" alt="" style="width : 200px">

<script>
    //找到img
    var img = document.getElementsByTagName('img')[0];
    //找到4个按钮
    var inList = document.getElementsByTagName('input');
    //遍历所有按钮,给他们加点击事件
    for(var i = 0; i < inList.length; i++){
        inList[i].onclick = function() {
            img.src = "../images/" + this.title;
        }
    }

</script>

</body>

</html>

相关文章

网友评论

    本文标题:点击按钮切换对应图片

    本文链接:https://www.haomeiwen.com/subject/aaiuoqtx.html