正文
javascript图片切换,js点击图片切换图片
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何用js实现点击图片切换另一图片，再次点击恢复？
方法如下
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
title/title
/head
body
script
window.onload=function(){
var Imgbtn=document.getElementById('btn');
var Img=document.getElementById('img');
Imgbtn.onclick=function(){
if(Img.src=='') {
Img.src='';
}else{
Img.src=''
}
}
}
/script
div id="bg"
div id="btn"
div id="txt"试客小兵/div
img id="img" src=""
/div
/div
/body
/html
扩展资料
JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
直译语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行。而其解决办法就是于使用try{}catch(){}︰
Javascript被归类为直译语言，因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行，其他引擎则是逐行解译（SpiderMonkey会将解译过的指令暂存，以提高性能，称为实时编译），但由于V8的核心部份多数用Javascript撰写（而SpiderMonkey是用C++），因此在不同的测试上，两者性能互有优劣。
与其相对应的是编译语言，例如C语言，以编译语言编写的程序在运行之前，必须经过编译，将代码编译为机器码，再加以运行。
参考资料：百度百科 JavaScript编程
相关问答
Q1: 怎样用javascript实现图片定时切换
思路：使用javascript定时器函数setTimeout()每隔一定的毫秒间隔数执行动作，在执行的动作中循环替换图片的src属性。树立演示如下：
1、HTML结构
img src="1.png" id="test"
2、javascript代码
function change(n){
if(n5) n=1; // 一共5张图片，所以循环替换
document.getElementById("test").setAttribute("src", n+".png");
n++;
setTimeout("change("+n+")",1000);
}
window.onload = function(){
setTimeout("change(1)", 1000);
}
3、效果演示
Q2: 如何用javascript实现三张以上的图片在点击图片时切换到下一张，我是初学者，希望用数组和循环实现求代码
script type="text/javascript"
window.onload = function() {
// 图片地址数组
var image_urls = ["first.jpg", "second.jpg", "third.jpg", "fourth.jpg"];
// 初始化数组键值 (0 = 第一个图片)
var idx = 0;
// 点击 id 为 img 的图片
document.getElementById("img").onclick = function() {
// idx + 1，如果为最后一张，还原回第一张
idx = idx === image_urls.length - 1 ? 0 : idx + 1;
// 设置 src
this.src = image_urls[idx];
// 测试
alert(this.src);
};
};
/script
img id="img" src="first.jpg" /
上面代码只用了一个 img，点击更换地址。
还是你想全部隐藏（除当前图片），点击后显示下一张？
