导航:首页 > 图片大全 > 如何用js实现点击图片时换图片
如何用js实现点击图片时换图片
发布时间：2024-10-20 19:30:36❶ JS实现点击一个按钮更换图片
你的代码差在少了"选择元素"这一步。
img1.src = "..images/DT2.JPG"这一步是没有作用的，因为img1你还没有定义。
正确的方法是让图片元素的id是img1，然后
document.getElementById('img1').src = "..images/DT2.JPG"
这样进行赋值。
document.getElementById('img1')这一步的作用就是选择图片元素。
这是针对此问题的测试页面
代码如下
<div class="DT">
<div>
<img id="img1" src="https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"
/>
</div>
</div>
<div style="text-align:center">
<input type="button" id="b1" value=" 放大 " onclick="fd();" />
<input type="button" id="b3" value="还原 " onclick="hy();" />
<input type="button" id="b2" value=" 缩小 " onclick="sx();" />
</div>
function fd() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_400x400.jpg"
}
function sx() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_180x180.jpg"
}
function hy() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"
}
❷ 如何用js实现点击图片切换另一图片，再次点击恢复
方法如下
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title></title>
</head>
<body>
<script>
window.onload=function(){
varImgbtn=document.getElementById('btn');
varImg=document.getElementById('img');
Imgbtn.onclick=function(){
if(Img.src=='http://dl.bi.sogou.com/images/2012/01/19/191337.png'){
Img.src='http://pic3.nipic.com/20090701/2847972_130628068_2.jpg';
}else{
Img.src='http://dl.bi.sogou.com/images/2012/01/19/191337.png'
}
}
}
</script>
<divid="bg">
<divid="btn">
<divid="txt">试客小兵</div>
<imgid="img"src="http://dl.bi.sogou.com/images/2012/01/19/191337.png">
</div>
</div>
</body>
</html>
Javascript被归类为直译语言，因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行，其他引擎则是逐行解译（SpiderMonkey会将解译过的指令暂存，以提高性能，称为实时编译），但由于V8的核心部份多数用Javascript撰写（而SpiderMonkey是用C++），因此在不同的测试上，两者性能互有优劣。
与其相对应的是编译语言，例如C语言，以编译语言编写的程序在运行之前，必须经过编译，将代码编译为机器码，再加以运行。
❸ HTML怎么设置点击一张图片换一张图片
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。
与如何用js实现点击图片时换图片相关的资料
- 如何视频加图片解说
- 馄饨图片大全图片高清
- ppt如何把背景图片弄成一样的
- 如何在插入批注中插入图片
- ai如何平均裁剪图片
- 如何让图片加上国旗
- ai如何把黑白图片变成彩色
- 英文字母立体图片大全
- 手机如何做gif动态图片
- 电钢琴图片大全
- 如何压缩图片至100k
- 字体画图片大全图片
- unity如何定轴旋转图片
- 如何把图片弄成爱心的
- 如何用手机给图片添加全屏水印
- 如何一边放图片一边放音乐
- 图片上如何加自己的自拍小贴纸
- 手机如何发长图片尺寸
- 九赛沟风景图片大全
- 图片视频剪映如何制作横屏
- 如何用华为手机压缩图片和文档
- 如何把括号的章子放在图片上
- 如何把女朋友头像做成应用图片
- 古代贵妃图片大全
- 徽信卡通头像图片大全
- 真诚对人的图片大全
- 如何把删除的图片恢复过来
- 陈浩民儿女图片大全
- 如何将ps的图片变成3d效果
- 如何操作电脑屏保图片
- 2008vs如何设置图片的背景
- 图片体积太小如何调节用wps
- mac如何剪贴图片
- ps如何去掉图片上彩色文字
- 图片如何识别网站
- 方镜子图片如何编辑
- ps如何把图片挡上去
- 在剪映中如何在视频后面衔接图片
- 微信图片上如何标记
- 王晓晨裸身图片大全
- 如何让妹妹开心的图片
- 截屏的图片如何传到手机