Ajax无刷新实现图片切换特效2
点击次数：26 次 发布日期：2008-11-26 11:42:00 作者：源代码网
|
源代码网推荐 <script language="javascript" type="text/javascript"> 源代码网推荐 // 定时器 源代码网推荐 var timeDelay; 源代码网推荐 源代码网推荐 // 图片自动浏览时的时间间隔 源代码网推荐 var timeInterval = 4000; 源代码网推荐 源代码网推荐 // Array对象,存储图片文件的路径 源代码网推荐 var image; 源代码网推荐 源代码网推荐 // 当前显示的图片序号 源代码网推荐 var num; 源代码网推荐 源代码网推荐 // 图片信息数据表 源代码网推荐 var dt; 源代码网推荐 // 预加载图片信息 源代码网推荐 function PreloadImage(iCategoryID) 源代码网推荐 { 源代码网推荐 // 采用同步调用的方式获取图片的信息 源代码网推荐 var ds = AjaxImage.AjaxMethod.GetPhotoList(iCategoryID).value; 源代码网推荐 源代码网推荐 // 如果返回了结果 源代码网推荐 if (ds) 源代码网推荐 { 源代码网推荐 // 判断数据表是否不为空 源代码网推荐 if (ds.Tables[0].Rows.length > 0) 源代码网推荐 { 源代码网推荐 // 返回的图片信息数据表 源代码网推荐 dt = ds.Tables[0]; 源代码网推荐 源代码网推荐 // 用image对象存储图片的文件路径 源代码网推荐 image = new Array(); 源代码网推荐 源代码网推荐 // 图片在Photos目录下 源代码网推荐 for (var i = 0; i < dt.Rows.length; i++) 源代码网推荐 { 源代码网推荐 image[i] = "Photos/" + dt.Rows[i].photo_path; 源代码网推荐 } 源代码网推荐 源代码网推荐 // imagePreload对象用于实现图片的预缓存 源代码网推荐 var imagePreload = new Array(); 源代码网推荐 for (var i = 0;i < image.length;i++) 源代码网推荐 { 源代码网推荐 // 通过新建Image对象,并将其src属性指向图片的URL 源代码网推荐 // 显现图片的预缓存 源代码网推荐 imagePreload[i] = new Image(); 源代码网推荐 imagePreload[i].src = image[i]; 源代码网推荐 } 源代码网推荐 源代码网推荐 // 初始化一些变量 源代码网推荐 num = -1; 源代码网推荐 //nStatus = 0x09; 源代码网推荐 源代码网推荐 // 加载第一张图片 源代码网推荐 next_image(); 源代码网推荐 } 源代码网推荐 else // 分类下没有图片 源代码网推荐 { 源代码网推荐 alert("该目录下没有图片！"); 源代码网推荐 } 源代码网推荐 } 源代码网推荐 } 源代码网推荐 // 实现图片切换时的效果 源代码网推荐 function image_effects() 源代码网推荐 { 源代码网推荐 // Transition的值为0~23之间的随机数,代表24种切换效果 源代码网推荐 // 具体值与效果之间的对应见MSDN 源代码网推荐 document.slideShow.filters.revealTrans.Transition = Math.random() * 23; 源代码网推荐 源代码网推荐 // 应用并播放切换效果 源代码网推荐 document.slideShow.filters.revealTrans.apply(); 源代码网推荐 document.slideShow.filters.revealTrans.play(); 源代码网推荐 } 源代码网推荐 function next_image() 源代码网推荐 { 源代码网推荐 // 当前图片的序号向后移动,如果已经是最后一张, 源代码网推荐 // 则切换到第一张图片 源代码网推荐 num++; 源代码网推荐 num %= image.length; 源代码网推荐 源代码网推荐 // 图片的切换效果 源代码网推荐 image_effects(); 源代码网推荐 源代码网推荐 // 将<img>对象的src属性设置为当前num对应的路径 源代码网推荐 // 切换图片的显示 源代码网推荐 document.slideShow.src = image[num]; 源代码网推荐 } 源代码网推荐 function previous_image() 源代码网推荐 { 源代码网推荐 // 当前图片的序号向后移动,如果已经是最后一张, 源代码网推荐 // 则切换到第一张图片 源代码网推荐 num += image.length - 1; 源代码网推荐 num %= image.length; 源代码网推荐 源代码网推荐 // 图片的切换效果 源代码网推荐 image_effects(); 源代码网推荐 源代码网推荐 // 将<img>对象的src属性设置为当前num对应的路径 源代码网推荐 // 切换图片的显示 源代码网推荐 document.slideShow.src = image[num]; 源代码网推荐 源代码网推荐 } 源代码网推荐 function slideshow_automatic() 源代码网推荐 { 源代码网推荐 // 当前图片的序号向后移动,如果已经是最后一张, 源代码网推荐 // 则切换到第一张图片 源代码网推荐 num ++; 源代码网推荐 num %= image.length; 源代码网推荐 源代码网推荐 // 图片的切换效果 源代码网推荐 image_effects(); 源代码网推荐 源代码网推荐 // 将<img>对象的src属性设置为当前num对应的路径 源代码网推荐 // 切换图片的显示 源代码网推荐 document.slideShow.src = image[num]; 源代码网推荐 timeDelay = setTimeout( "slideshow_automatic()",timeInterval ); 源代码网推荐 } 源代码网推荐 // 停止自动播放 源代码网推荐 function pauseSlideShow() 源代码网推荐 { 源代码网推荐 // 清除定时器,不再执行slideshow_automatic函数 源代码网推荐 clearTimeout(timeDelay); 源代码网推荐 } 源代码网推荐 </script> 源代码网推荐 四、在主页面的ONLOAD事件里面添加： 源代码网推荐 源代码网推荐 onload="PreloadImage("2")" 源代码网推荐 源代码网推荐 五、WebConfig添加: 源代码网推荐 <system.web> 源代码网推荐 <httpHandlers> 源代码网推荐 <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro" /> 源代码网推荐 </httpHandlers> 源代码网推荐 源代码网推荐 <configuration> 源代码网推荐 <appSettings> 源代码网推荐 <add key="ConnectionString" value="server=127.0.0.1;database=test;uid=sa;pwd=dfdf" /> 源代码网推荐 </appSettings> 源代码网推荐 六、数据库脚本: 源代码网推荐 CREATE TABLE [Photo] ( 源代码网推荐 [id] [int] IDENTITY (1, 1) NOT NULL , 源代码网推荐 [photo_title] [varchar] (128) COLLATE Chinese_PRC_CI_AS NULL , 源代码网推荐 [photo_description] [text] COLLATE Chinese_PRC_CI_AS NULL , 源代码网推荐 [photo_category_id] [int] NULL , 源代码网推荐 [photo_path] [varchar] (255) COLLATE Chinese_PRC_CI_AS NULL 源代码网推荐 ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY] 源代码网推荐 GO 源代码网推荐 http://www.cnblogs.com/wander/archive/2006/09/19/508648.html 源代码网推荐 做人要厚道，请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
