图片切换
作者:
Yuann | 来源:发表于
2017-09-21 21:40 被阅读0次<body>
<a href= "http:www.baidu.com" style="margin:10px;display:block" onclick="fn();return false;">切换</a>
<img id="img" src = "image/1.jpg" width = 400px"/>
<script>
//需求：点击a链接，img图片切换（行内式）
//步骤
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源和图片
var a = document.getElementsByTagName("a")[0];
var img = document.getElementById("img");
//2.绑定事件
a.onclick = function()
{
//3.书写事件驱动程序
img.src = "image/2.jgp";
//return false的目的是禁止a链接跳转
return false;
}
var img = document.getElementById("img");
function fn(){
img.src = "image/2.jpg";
}
</script>
</body>
本文标题：图片切换
本文链接：https://www.haomeiwen.com/subject/hseasxtx.html
网友评论