导航:首页 > 图片大全 > 如何用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实现点击图片时换图片相关的资料
- 拍照如何把横屏的图片调成竖屏
- 如何把图片变成带音乐的视频
- 电脑上如何将图片放入u盘
- 堆糖美甲图片大全
- 爱笔思画如何在图层导入图片
- 如何做水果图片
- 如何开心度过明天图片
- 如何给客户发产品图片
- 如何打理图片上的水印
- wps如何抠取图片带字印章
- 微信如何同时分享多个图片
- ppt如何用线条裁剪图片
- 照相机动态图片如何拍
- 如何把图片处理成光线效果
- wps如何抠下图片上手写的文字
- 如何将图片裁剪并拼接
- 金龙品种鉴别图片大全
- 如何看待盲人健康教案图片
- 超轻粘土蜘蛛图片大全
- 如何在图片中加上文字的背景
- 手机如何图片识物
- 艺术果盘图片大全
- 如何用图片做手机壳
- 如何能从头条上发图片
- 汽车广告图片大全
- 如何把wps多张图片调成统一大小
- 抖音如何支持剪切过的图片
- 太阳花图片大全简笔
- 如何查询google图片上传日期
- 儿童美食绘画图片大全
- 初中班徽如何设计图片
- 人正常腰椎骨图片大全
- 相册中删除的图片如何找回
- 简画鸭子图片大全
- 如何影响图片的画质
- 如何把图片置于电子文档底部
- wps如何在图片上标号
- 手的图片如何涂色
- 上好蜜蜡图片大全
- 米家如何将图片缩小做头像
- 环保儿童画图片大全
- 人体骨骼图片大全