JS学习笔记—简单的图片切换JS代码

   我找这段代码是为了做一个图片每隔固定时间切换一次，同时又能够手动点选数字按钮切换成想要展示的图片的JS，当时网上看了不少类似代码，但就只有这段代码最简单，所以也就抄了这段下来。

代码如下：

<script language =javascript >
var curIndex=0; //时间间隔 单位毫秒
var timeInterval=5000;
var arr=new Array();
arr[0]="1.jpg";
arr[1]="2.jpg";
arr[2]="3.jpg";
arr[3]="4.jpg";
arr[4]="5.jpg";
arr[5]="6.jpg";
arr[6]="7.jpg";
setInterval(changeImg,timeInterval);
function changeImg()
{
var obj=document.getElementById("showpic");
if (curIndex==arr.length-1)
    { curIndex=0;
    }
else
    { curIndex+=1;
    }
obj.src="image/"+arr[curIndex];
}
</script>
<img src="image/1.jpg" width="427" height="219" id="showpic" />  
本段代码转自“脚本之家” http://www.jb51.net/article/28383.htm 

 

       这段代码很简单，一看就懂，但是很显然这段代码并不能实现我所想要的第二个功能：手动点选数字按钮切换成想要展示的图片。因此为了实现这个功能我又在后面加了一段代码：

function showimg (b)
{
    switch(b)
  
 {
  case 0:document.getElementById("showpic").src="images/"+arr[b];break;
  case 1:document.getElementById("showpic").src="images/"+arr[b]; break;
  case 2:document.getElementById("showpic").src="images/"+arr[b]; break;
  case 3:document.getElementById("showpic").src="images/"+arr[b]; break;
 }
    
   
}

    我想的很简单，就只是单纯的给按钮赋一个值，当点击按钮时函数就会传递这个值过来交由switch进行判断，通过不同的值返回不同的图片。这样功能似乎也就实现了，但是运行了之后我发现一切并没有想象中的那么美好，我点击按钮确实是能选中我想要的图片，但是选中图片的同时并没有同时将定时函数置0···也就是说假设我3秒自动换一张图，那么当我在过了两秒的时候去选择自己想要看的图片时，图片会切换，但是只显示一秒···

    我只是个IT新手，对于JS也并不熟悉，因此我感到茫然了，要怎样才能将定时函数置0呢？我最先想到的就是 clearInterval()，于是我在break前面加了一段代码：

 clearInterval(changeImg);

当时是想着选中的同时清除定时器，但是运行之后发现根本没用，加了和没加是一个效果，后来仔细想了想，clearInterval()就算生效了估计也只是把setInterval()清除，而不是置0，这样一来根本就没意义了。或许JS高手们有办法利用循环来进行清除和调用，但是我确实是办不到了，最后只能想一个不是办法的办法：把定时器的时间设置的长一些，这样一来多少能起到一点掩饰作用···

    至此我的程序也就算完成了，诚然， 这段程序很幼稚，不管是从我前面所说的BUG，还是从后期维护的角度上来看都很不成熟，但是这也仅仅只是我基于现阶段对于JS一点点粗浅的了解所编写出来的，相信以后随着对JS了解的加深，我一定能写出更多更好的程序！

    最后衷心希望各位高手大大们日后有机会多多提点一下小弟，小弟感激不尽~~