《用jquery实现图片的切换与随机显示》由会员分享，可在线阅读，更多相关《用jquery实现图片的切换与随机显示（6页珍藏版）》请在金锄头文库上搜索。
1、用 jquery 实现图片的切换与随机显示本例所要实现的效果如下：1 单击按钮，能够切换图片切换之前，如图 1 所示：图 1切换之后，如图 2 所示：图 22 图片每次切换后，位置是随机变化的切换之前，如图 3 所示：图 3切换之后，如图 4 所示：图 43 第一次所有图片加载时，效果是淡入的，加载完之后的所有切换淡入效果消失。 （由于此效果难截图，所以不能显示）4 鼠标移上去，图片变大，下边显示有关于图片的描述信息如图 5 所示：图 5下边有关此效果的具体实现步骤。前提将 html，css 样式，所需图片，准备好，源文件放在源文件文件夹下边。为操作方便，布局采用的是 table+div。本例
2、图片分两组，一组显示 12 张图片。 单击按钮，切换图片打开浏览器时，图片并未直接加载在页面中，而是通过调用 js 代码将第一组图片一张张加载进去。关键代码如下$(document).ready(function()for(var i=0;i=1)$(#i+i).hide().attr(src,imgs/+count+ai+.jpg).show();else$(#i+i).hide().attr(src,imgs/+count+ai+.jpg).fadeIn(2000);本函数设计有个缺陷是如果第一次显示图片还未加载完成，用户就快速点击切换按钮，则可能会造成之后点击的图片显示不出来。所以必须有
3、个判断图片是否成功加载完毕的函数。此函数暂未实现。鼠标移上去，图片变大，下边显示有关于图片的描述信息由于图片是随机显示的，所以图片描述信息也必须随着图片的随机显示而显示，因此不能简单的将其写入 html 代码中固定不变。本例采用两个数组来保存两组图片的描述信息。即 groupPictures0，groupPictures1，所以上述代码都需要改成一下形式：初始时，加载第一组图片，并且加载图片描述信息，将其设为隐藏。$(document).ready(function()for(var i=0;i=1)$(#i+i).hide().attr(src,imgs/+count+ai+.jpg).sh
4、ow();else$(#i+i).hide().attr(src,imgs/+count+ai+.jpg).fadeIn(2000);/用来判断单击按钮时，切换到第几组图片，从而找到相应的图片信息描述的组号。if(count=1)$(#i+i).next().append(groupPictures1ai).hide();else$(#i+i).next().append(groupPictures0ai).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();)到此，所有效果均以实现。
