设置首页
-
加入收藏
导航:
博客
-
文章
-
图片
-
下载
-
论坛
[ 首页 ]
[ ASP编程 ]
[ WEB技术 ]
[ 脚本应用 ]
[ 图文教程 ]
[ 站长资讯 ]
当前位置:
文章中心
-
脚本应用
-
JS图片切换
相关文章
JS图片切换
JavaScript 图片滑动切换效果
JavaScript 图片变换效果(ie only)
CSS无图片实现圆角框
纯JS+CSS的液晶数码彩色显示板效果(无图片)
一个简单的图片弹出层,兼容所有浏览器
仿土豆网首页效果, 焦点图片切换效果
asp利用aspjpeg给图片生成PNG透明水印
用ASP取出HTML里面的图片地址的函数
JS图片放大查看效果!
这里放搜索
最新文章
检测大写锁定键
JS图片切换
JavaScript 图片滑动切换效果
JavaScript 图片变换效果(ie only)
幻于算法
VBScript实现的escape和unescape功能函数
自动排版工具
精妙SQL语句介绍
CSS无图片实现圆角框
简单的弹出层加遮罩层效果
JS图片切换
关键词:图片,切换 时间:2009年06月12日 星期五 阅读:391
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS图片切换</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } #js_F { position:relative; top:10px; left:10px; overflow:hidden; width:270px; height:185px; background:#33c; } #js_F img{ position:absolute; top:0; left:0; width:270px; height:185px; } </style> </head> <body> <div id="js_F"></div> <script type="text/javascript"> <!--///*--><![CDATA[/*><!--*/ var js_F = document.getElementById("js_F"); var imgList = ["http://hahalaiba.fj126.net/art/file/preview/09612235hqnee.jpg", "http://hahalaiba.fj126.net/art/file/preview/09612235qsy4l.jpg", "http://hahalaiba.fj126.net/art/file/preview/09612235vnfpa.jpg", "http://hahalaiba.fj126.net/art/file/preview/09612235g4oir.jpg", "http://hahalaiba.fj126.net/art/file/preview/09612235mrq3w.jpg", ]; var imgTemp = new Array(); for (i=0; i<imgList.length; i++){ imgTemp[i] = new Image(); imgTemp[i].src = imgList[i]; } var imgs = new Array(); var imgID = 0, nextImgID, proveImgID; var tf = true; //图片移动方向标志 var speed1 = 10; speed2 = 3000; //速度 function imgInit(){ var content = ''; for (i=0; i<imgList.length; i++){ content += '<img src="' + imgList[i] + '" style="left:0;" />\n'; } js_F.innerHTML = content; imgs = js_F.getElementsByTagName('img'); imgs[0].style.zIndex = 20; imgs[1].style.zIndex = 15; } function imgChange(){ if ((imgID+1)<imgList.length){ nextImgID = imgID + 1; } else if (imgID<imgList.length) { nextImgID = 0; } else { imgID = 0; nextImgID = imgID + 1; } imgs[imgID].style.zIndex = 20; imgs[nextImgID].style.zIndex = 15; setTimeout('imgShow()',speed2); } function imgShow(){ if (tf){ //imgID向左边移动2/3,nextImgID向右边1/3 if (parseInt(imgs[imgID].style.left)>-180){ imgs[imgID].style.left = (parseInt(imgs[imgID].style.left)-10) + 'px'; imgs[nextImgID].style.left = (parseInt(imgs[nextImgID].style.left)+5) + 'px'; setTimeout('imgShow()',speed1); } else { tf = !tf; imgs[imgID].style.zIndex = 15; imgs[nextImgID].style.zIndex = 20; setTimeout('imgShow()',speed1); } } else { if (parseInt(imgs[imgID].style.left)<0){ imgs[imgID].style.left = (parseInt(imgs[imgID].style.left)+10) + 'px'; imgs[nextImgID].style.left = (parseInt(imgs[nextImgID].style.left)-5) + 'px'; setTimeout('imgShow()',speed1); } else { imgs[imgID].style.zIndex = 10; tf = !tf; imgID++; imgChange(); } } } imgInit(); imgChange(); /*]]>*///--> </script> </body> </html>
提示:可以先修改部分代码后再运行
上一篇:
JavaScript 图片滑动切换效果
下一篇:
检测大写锁定键
0条记录
访客评论
暂未有任何评论,你来发表一篇吧!
发表评论
昵称
(必填)
内容
(必填)
答案
(必填)
记住我,再次发表不需要重填个人信息。
不想保留信息请
删除cookie
!
友情链接
天意设计
与蓝雨对话
Copyright © 2008-2009
蓝雨设计
闽icp备05009764号
Powered by
Bcms X2
. Processed in 0.000000 second(s), 0 queries
0条记录访客评论