第三行第一列
这个单元里也是一个html的img标签，在这个标签上，我想实现的是，当你单击图片时，此标签的背景自动切换到下一张图片，而且这些图片是顺序显示的。在后台，有一个文件夹，存储要切换的10张背景图片，而且是顺序编号的。用一个函数实现从第一张图片顺序显示到第十张图片，在从第十张图片倒序显示到第一张图片，这样来回切换显示。
关于循环显示背景图片，前不久我写过一个js函数，成功实现。代码如下：
- var i=1;
- var j=0;
- function picLoad(){
- if(j==0){
- if(i<9){
- window.document.pic.src=i+".jpg";
- i++;
- if(i==9) j=1;
- }
- }
- if(j==1){
- if(i>-1){
- i--;
- window.document.pic.src=i+".jpg";
- if(i==0) j=0;
- }
- }
-
-
-
-
-
-
-
- setTimeout("picLoad()",1000);
- }
pic是一个img标签的id号，从这句话更能看出JavaScript是弱类型语言：window.document.pic.src=i+".jpg";
有了这个函数的经验，和上面随机显示一张图片的switch语句，我想到了下面这个js函数：
- var j=0;
- var i=0;
- function img2_onclick(img2){
- if(i<12&&j=0){
- i++;
- switch(i){
- case 1:img2.src="image2/0.bmp";break;
- case 2:img2.src="image2/1.bmp";break;
- case 3:img2.src="image2/2.bmp";break;
- case 4:img2.src="image2/3.bmp";break;
- case 5:img2.src="image2/4.bmp";break;
- case 6:img2.src="image2/5.bmp";break;
- case 7:img2.src="image2/6.bmp";break;
- case 8:img2.src="image2/7.bmp";break;
- case 9:img2.src="image2/8.bmp";break;
- case 10:img2.src="image2/9.bmp";break;
- default:img2.src="image2/10.bmp";
- }
- }
- if(i==12){
- j=1;
- }
- if(j==1){
- i--;
- if(i>-1){
- switch(i){
- case 1:img2.src="image2/0.bmp";break;
- case 2:img2.src="image2/1.bmp";break;
- case 3:img2.src="image2/2.bmp";break;
- case 4:img2.src="image2/3.bmp";break;
- case 5:img2.src="image2/4.bmp";break;
- case 6:img2.src="image2/5.bmp";break;
- case 7:img2.src="image2/6.bmp";break;
- case 8:img2.src="image2/7.bmp";break;
- case 9:img2.src="image2/8.bmp";break;
- case 10:img2.src="image2/9.bmp";break;
- default:img2.src="image2/10.bmp";
- }
- }
- }
- if(i=-1){
- j=0;
- }
- setTimeout("im2_onclick()",1000);
- }
然而，不幸的是，我又失败了，不管你怎么单击图片，背景就是不改变。不过我也不太喜欢这个函数，你说要是图片很多的话，我的switch语句不是要很多了？所以应该有更好的方法实现图片的循环显示的。
于是求助于csdn，一位JavaScript高手解决了我的问题。真没想到，我用那么多代码都没实现的问题，别人就用了一个函数就实现了，真的既高效有简介。这是一个多么优美的函数，犹如卞之琳的《断章》，让人回味无穷！想必你比我更期待这个函数吧！那我们就来看看吧！
- var a=1,range=1;
- function img2_onclick(){
- if(event.button==1){
- setInterval(function(){
- document.getElementById('img2').src="image2/"+a+".bmp";
- a += range;
- if(a==10||a==1) range *= -1;
- },1000)
- }
- else{
- alert("当你多次左键单击图片后，你将眼花缭乱");
- }
- }
原函数只是setInterval部分，其他的部分是我改过的。
我说得没错吧！真的妙哉，妙哉！
经过这位仁兄的提醒，我一下想到以前我看过的一个js函数，setInterval函数里面在嵌套函数，嵌套了好几层，具体我找找看，找到了给大家看看！
第三行第二列
这里也是一个html的img标签，给此标签添加了一个单击事件，通过window.open函数打开另一个页面。代码如下：
- function img3_onclick(img3) {
- if(confirm("你想进入此页吗？")){ window.open("myCar.htm","","height=1000,width=1000,toolbar=no,location=no,status=no,menubar=no,resizable=no");
- }
-
- }
这里想说的是confirm函数，这个函数弹出一个窗口，有两个按钮，“确定”和“取消”。当你单击“确定”按钮时，返回一个true值，当你单击“取消”时，返回一个false值。
当你单击图片时，弹出此对话框，若你单击“确定”，那么myCar.htm网页将打开，如果你单击“取消”，那么myCar.htm网页将不会被打开，继续停留在本网页上。
| 
转播
