用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;这样做的好处是通过图片名字的第一位数判断图片所属的组数，由于浏览器是第一次