使用JavaScript点击事件切换图片

owplace

于 2018-05-04 22:37:38 发布

阅读量4.1k

点赞数 3

本文链接：https://blog.youkuaiyun.com/bafangcio/article/details/80201193

版权

本文介绍了一个简单的网页示例，通过点击不同图片来实现另一张图片的更新及对应文本的变化。该示例利用HTML与JavaScript实现了基本的交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <div id="mydiv">
	<img src="img/LIGE.jpg"width="200" height="150" title="我是LIGE"/>
	<img src="img/1480988130963.jpeg" width="200" height="150"title="坐着的"/>
	<img src="img/1480988139204.jpeg" width="200" height="150"title="躺着的"/>
    </div><br />
	<img src="img/4ca14e57fa573bed.jpg" id="dao" width="200" height="150" title="李云龙"/>
	<p id="huan"></p>
</body>

 <script type="text/javascript">
    var mydiv=document.getElementById("mydiv");//获得div里的三张图片
    var myimg=mydiv.getElementsByTagName("img");//获得div的各三张图片 数组
    for(var i=0;i<myimg.length;i++){
        var myimge=document.getElementById("dao");//获得李云龙图片
        var tit=document.getElementById("huan");//获得李云龙文本
        myimg[i].οnclick=function(){
        myimge.src=this.src;//替换图片
        tit.innerText=this.title;//替换文字
           }
        }
</script>