资源预览内容
第1页 / 共6页
第2页 / 共6页
第3页 / 共6页
第4页 / 共6页
第5页 / 共6页
第6页 / 共6页
亲,该文档总共6页全部预览完了,如果喜欢就下载吧!
资源描述
用 jquery 实现图片的切换与随机显示本例所要实现的效果如下:1 单击按钮,能够切换图片切换之前,如图 1 所示:图 1切换之后,如图 2 所示:图 22 图片每次切换后,位置是随机变化的切换之前,如图 3 所示:图 3切换之后,如图 4 所示:图 43 第一次所有图片加载时,效果是淡入的,加载完之后的所有切换淡入效果消失。 (由于此效果难截图,所以不能显示)4 鼠标移上去,图片变大,下边显示有关于图片的描述信息如图 5 所示:图 5下边有关此效果的具体实现步骤。前提将 html,css 样式,所需图片,准备好,源文件放在源文件文件夹下边。为操作方便,布局采用的是 table+div。本例图片分两组,一组显示 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);本函数设计有个缺陷是如果第一次显示图片还未加载完成,用户就快速点击切换按钮,则可能会造成之后点击的图片显示不出来。所以必须有个判断图片是否成功加载完毕的函数。此函数暂未实现。鼠标移上去,图片变大,下边显示有关于图片的描述信息由于图片是随机显示的,所以图片描述信息也必须随着图片的随机显示而显示,因此不能简单的将其写入 html 代码中固定不变。本例采用两个数组来保存两组图片的描述信息。即 groupPictures0,groupPictures1,所以上述代码都需要改成一下形式:初始时,加载第一组图片,并且加载图片描述信息,将其设为隐藏。$(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);/用来判断单击按钮时,切换到第几组图片,从而找到相应的图片信息描述的组号。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();)到此,所有效果均以实现。
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号