原帖及讨论：http://bbs.bccn.net/thread-136723-1-1.html
菜鸟应用JAVASCRIPT 之 简单图片浏览
因为无聊,所以写了一篇这样的所谓的教学文章,如果这篇文章能够给大家带来一点帮助,那么我会很开心的.如果这篇文章在以后被证实会误导像我这样IQ的人,那么我提前说一声”抱歉”.好了,废话不多说了,现在就开始我们的看文章之旅吧.--编程之星
注:如果大家还想让我继续无聊地写这类菜鸟文章的话,就回帖说明,好吗?
程序说明:
这是一个比较简单的Javascript应用程序,虽然比较简单,但应该有时也比较实用吧.通过选择相应的项目来显示相应的图片,希望这个程序能给大家,特别是初学者一个起到一个参考的作用,以举一反三,触类旁通.
程序效果图1:
程序效果图2:
以下就是完整的源代码:
<script>
var imgarray=new Array();
function setIamges()
{
imgarray[0]=new Image();
imgarray[1]=new Image();
imgarray[2]=new Image();
imgarray[0].src="http://www.bccn.net/Article/UploadFDL05/200706/20070613160119210.gif";
imgarray[1].src="http://www.bccn.net/Article/UploadFDL05/200706/20070613160124962.gif";
imgarray[2].src="http://www.bccn.net/Article/UploadFDL05/200706/20070613160124963.gif";
}
function changeImage(me)
{
document.images[0].src=imgarray[me].src;
}
</script>
<body onload="setIamges();">
<select style="width:152px;" onchange="changeImage(this.selectedIndex);">
<option>图片1
<option>图片2
<option>图片3
</select>
<br>
<img src="http://rostar.hy00.com/home/rostar/image002.jpg" style="width:150;height:150;border:1px solid skyblue;"></img>
</body>
下面我们来分析一下源代码:
首先我们先来声明一个数组：
var imgarray=new Array();
现在我们应该提出一个问题了：
(问题A)为什么要声明这个数组呢?
接下来,我就试着解答这道问题:
解答 问题A:
因为要预先将所有的图片载入浏览器的缓冲区,以免网络堵塞可能引起的使图片浏览不顺畅的情况,所以就用数组来存储这些载入的图片,以便以后的操作.
接下来,我们来声明以下的这个函数:
function setIamges()
{
imgarray[0]=new Image();
imgarray[1]=new Image();
imgarray[2]=new Image();
imgarray[0].src="D:\\素材\\21.jpg";
imgarray[1].src="D:\\素材\\4.jpg";
imgarray[2].src="D:\\素材\\25.jpg";
}
在函数内部,大家有没有注意到这句new Image();Image()是Javascript中的image对象的构造函数.new Image()就表示创建一个Image对象.
将所有创建的Image对象都赋值给相应的数组元素.
然后,大家注意到imgarray[0].src这句了吗?这是因为Image对象有一个src属性,该属性值是一个图像文件的地址(可以是相对也可以是绝对).而前面已经将Image对象赋值给各数据元素了,所以各个相应的数据元素(例如: imgarray[0])也就有了src属性.
setIamges()函数会放在<body>标记的onload事件处理中,也就是说,在页面下载的时候,也同时将所需缓冲的图片都装载进了内存,从而提高了浏览图片的速度.避免了可能引起的网络堵塞所导致的浏览质量不好.
接下来,我们再来声明这样的一个函数:
function changeImage(me)
{
document.images[0].src=imgarray[me].src;
}
接下来,我试着去分析一下这个函数:
该函数有一个参数me,这里参数me是指数组下标.document.images[0]表示页面中的第一个<img>标记,而document.images[0].src就表示页面中的第一个<img>标记的src属性了.该函数内部只有一句代码: document.images[0].src=imgarray[me].src; 这句代码的意思是将指定数组元素的src属性值赋值给页面中的第一个<img>标记的src属性,从而就达到了显示指定图片的目的.
好了,所有的Javascript代码都完成了.接下来就由你自己写HTML代码啦.
还有一个地方需要解释一下的,请看以下:
<select style="width:152px;" onchange="changeImage(this.selectedIndex);">
this.selectedIndex是changeImage(me)函数的实际参数,表示选择框中的当前所选中的下标索引.
您现在的位置：