用jquery现图片切换与随机显示

用jquery现图片切换与随机显示

————————————————————————————————作者：————————————————————————————————日期：

用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;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++; //通过此判段语句，即可确定所有图片是否是第一次显示。

}

for(var i=0;i<=11;i++){

if(roundCount>=1){

$("#i"+i).hide().attr("src","imgs/"+count+a[i]+".jpg").show();

}else{

$("#i"+i).hide().attr("src","imgs/"+count+a[i]+".jpg").fadeIn(2000);

}

}

本函数设计有个缺陷是如果第一次显示图片还未加载完成，用户就快速点击切换按钮，则可能会造成之后点击的图片显示不出来。所以必须有个判断图片是否成功加载完毕的函数。此函数暂未实现。

④鼠标移上去，图片变大，下边显示有关于图片的描述信息

由于图片是随机显示的，所以图片描述信息也必须随着图片的随机显示而显示，因此不能简单的将其写入html代码中固定不变。本例采用两个数组来保存两组图片的描述信息。即groupPictures0，groupPictures1，所以上述代码都需要改成一下形式：

初始时，加载第一组图片，并且加载图片描述信息，将其设为隐藏。

$(document).ready(function(){

for(var i=0;i<=11;i++){

$("#i"+i).attr("src","imgs/0"+i+".jpg").hide().fadeIn(2000);

$("#i"+i).next().append(groupPictures0[i]).hide();

}

})

点击切换图片时，

function randomImage(){

count++;

count=count%2;

var a=new Array();

$("img").next().html("");//在每次切换图片时，将上一次显示的图片信息清空，否则会累加。

a=random();

if(count==0){

roundCount++;

}

for(var i=0;i<=11;i++){

if(roundCount>=1){

$("#i"+i).hide().attr("src","imgs/"+count+a[i]+".jpg").show(); }else{

$("#i"+i).hide().attr("src","imgs/"+count+a[i]+".jpg").fadeIn(2000 );

}

//用来判断单击按钮时，切换到第几组图片，从而找到相应的图片信息描述的组号。

if(count==1){

$("#i"+i).next().append(groupPictures1[a[i]]).hide();

}else{

$("#i"+i).next().append(groupPictures0[a[i]]).hide();

}

}

}

当鼠标移上去图片变大，并显示相关图片信息的关键代码如下：$(document).ready(function(){

$("td >div").hover(

function(){

$(this).addClass("move");

$(this).find("span").addClass("font").show();

},

function(){

$(this).removeClass("move");

$(this).find("span").removeClass("font").hide();

}

)})

到此，所有效果均以实现。