用jquery实现图片的切换和随机显示.docVIP

用jquery实现图片的切换与随机显示 本例所要实现的效果如下： 1单击按钮，能够切换图片 切换之前，如图1所示： 图1 切换之后，如图2所示： 图2 2图片每次切换后，位置是随机变化的 切换之前，如图3所示： 图3 切换之后，如图4所示： 图4 3第一次所有图片加载时，效果是淡入的，加载完之后的所有切换淡入效果消失。（由于此效果难截图，所以不能显示） 4鼠标移上去，图片变大，下边显示有关于图片的描述信息 如图5所示： 图5 下边有关此效果的具体实现步骤。 前提将html，css样式，所需图片，准备好，源文件放在源文件文件夹下边。为操作方便，布局采用的是table+div。本例图片分两组，一组显示12张图片。 ① 单击按钮，切换图片 打开浏览器时，图片并未直接加载在页面中，而是通过调用js代码将第一组图片一张张加载进去。关键代码如下 $(document).ready(function(){ for(var i=0;i=11;i++){ $(#i+i).attr(src,imgs/0+i+.jpg).hide().fadeIn(2000); //通过图片id获取图片路径 } }) 补充：为方便加载图片，图片的命名规则是00,01,02….011 10,11,12…111;这样做的好处是通过图片名字的第一位数判断图片所属的组数，由于浏览器是第一次加载图片，显示的是第一组，所以上述代码图片的第一位直接是0. 当单击按钮时，会触发randomImage()事件，即切换图片。关键代码如下: function randomImage(){ count++; //用来记录单击按钮的次数，设为全局变量，初始值为0 count=count%2; //遍历完一遍图片后，将count置为0，可以循环切换图片，并且能够通过count识别应该加载第几组图片，本例用的是两组图片，如果是多组图片，此方法照样可以用。 for(var i=0;i=11;i++){ $(#i+i).hide().attr(src,imgs/+count+i+.jpg).fadeIn(2000); } } ②图片每次变化后，位置是随机的 位置随机，即每次显示的图片跟前一次显示位置不同，即打乱图片显示顺序。由于图片实现是通 for(var i=0;i=11;i++)循环依次加载，而图片的路径跟i相关。所以只要将i的顺序打乱即可。通过函数randomImage（）即可打乱次序，关键代码如下： function random(){ var temp1; var temp2; var temp3; var b=new Array(0,1,2,3,4,5,6,7,8,9,10,11); //将固定的数组中的元素通过轮番交换位置将其打乱 for(var i=0;ib.length;i++){ temp1=parseInt(Math.random()*12);//通过随机函数确定数组索引值 temp2=parseInt(Math.random()*12); if(temp1!=temp2){ temp3=b[temp1]; b[temp1]=b[temp2]; b[temp2]=temp3; } } return b; } 通过此函数即可将顺序打乱，返回值是个数组，所以上述显示图片的代码可改为 function randomImage(){ count++; count=count%2; var a=new Array(); a=random(); for(var i=0;i=11;i++){ $(#i+i).hide().attr(src,imgs/+count+a[i]+.jpg).fadeIn(2000); } } 通过此函数即可将图片位置打乱。 ③第一次所有图片加载时，效果是淡入的，加载完之后的所有切换淡入效果消失 本例图片是直接放在本地文件夹中，所以不需下载，若与服务器连接，那么需下载图片，这过程需花费时间，所以第一次实现的时候需要等待，为模仿这效果，用淡入效果代替，完全下载完之后，即直接显示，淡入效果消失。为此，引入一个变量roundCount（为全局变量，初始值为0）用来记录所有图片是否是第一次显示。具体代码如下。 function randomImage(){ count++; count=count%2; var a=new Array(); a=random(); if(count==0){ roundCount++; //通过此判段语句，即可确定所有图片是否是第一次显示。 } f