javascript图片切换,js点击图片切换图片

如何用js实现点击图片切换另一图片，再次点击恢复？

方法如下

创新互联于2013年创立，先为黄浦等服务建站，黄浦等地企业，进行企业商务咨询服务。为黄浦企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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编程

怎样用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、效果演示

如何用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，点击更换地址。

还是你想全部隐藏（除当前图片），点击后显示下一张？