主站
经典论坛
作品集
Think.Pages
博客
维基
桌面
聚合
注册
登录
专长会员
帮助
客服QQ:6650171
经典论坛
«
前台制作与脚本专栏
« 请高人们帮忙修改一段代码,着急等待!!
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
请高人们帮忙修改一段代码,着急等待!!
love521
[楼主]
新手上路
帖子
3
体力
12
威望
0
离线
2 天
发短消息
1
#
大
中
小
发表于 2008-5-9 09:28
现在需要这段代码实现这样的效果:
1.两张图片交换,方向是上下交换.
2.有缓冲效果.
3.只交换一次,不要求循环交换.
谢谢各位好人了.
<!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" lang="gb2312"> <head> <title>JS图片切换 ::</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="generator" content="editplus" /> <meta name="author" content="eLore" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <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://www.lmwq.com.cn/imglist/01.jpg", "http://www.lmwq.com.cn/imglist/02.jpg", "http://www.lmwq.com.cn/imglist/03.jpg", "http://www.lmwq.com.cn/imglist/04.jpg", "http://www.lmwq.com.cn/imglist/05.jpg", "http://www.lmwq.com.cn/imglist/06.jpg", "http://www.lmwq.com.cn/imglist/07.jpg", "http://www.lmwq.com.cn/imglist/08.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>
提示:您可以先修改部分代码再运行
[
本帖最后由 love521 于 2008-5-9 11:24 编辑
]
积分
12
阅读权限
10
在线时间
7 小时
注册
2007-4-22
最后登录
2008-7-4
查看详细资料
TOP
love521
[楼主]
新手上路
帖子
3
体力
12
威望
0
离线
2 天
发短消息
2
#
大
中
小
发表于 2008-5-9 09:46
有人回复吗.我在线等啊.
积分
12
阅读权限
10
在线时间
7 小时
注册
2007-4-22
最后登录
2008-7-4
查看详细资料
TOP
caiying2007
版主
帖子
2388
体力
4546
威望
10
发短消息
3
#
大
中
小
发表于 2008-5-9 21:20
test:
<!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" lang="gb2312"> <head> <title>JS图片切换 ::</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="generator" content="Microsoft FrontPage 6.0" /> <meta name="author" content="eLore" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } </style> </head> <body> <div id="js_F"></div> <script type="text/javascript"> <!-- var js_F = document.getElementById("js_F"); var imgList = ["http://www.lmwq.com.cn/imglist/01.jpg", "http://www.lmwq.com.cn/imglist/02.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 = 30; speed2 = 6000; //速度 var w=270,h=180;//图片宽高 function imgInit(){//初始化 var content = ''; for (i=0; i<imgList.length; i++){ content += '<img src="' + imgList[i] + '" style="top:0;" />\n'; } content +='<style type="text/css">' content +='#js_F{ position:relative;top:10px; left:10px;overflow:hidden;width:'+w+'px; height:'+h+'px;background:#33c;}' content +='#js_F img{position:absolute;top:0;left:0;width:'+w+'px;height:'+h+'px;}</style>' 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.top)>-h*2/3){ imgs[imgID].style.top = (parseInt(imgs[imgID].style.top)-10) + 'px'; imgs[nextImgID].style.top = (parseInt(imgs[nextImgID].style.top)+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.top)<0){ imgs[imgID].style.top = (parseInt(imgs[imgID].style.top)+10) + 'px'; imgs[nextImgID].style.top = (parseInt(imgs[nextImgID].style.top)-5) + 'px'; setTimeout('imgShow()',speed1); } else { imgs[imgID].style.zIndex = 10; tf = !tf; imgID++; // imgChange(); } } } imgInit(); imgChange(); //--> </script> </body> </html>
提示:您可以先修改部分代码再运行
积分
4556
阅读权限
100
在线时间
1911 小时
注册
2007-6-28
最后登录
2008-7-6
查看详细资料
TOP
love521
[楼主]
新手上路
帖子
3
体力
12
威望
0
离线
2 天
发短消息
4
#
大
中
小
发表于 2008-5-12 13:43
caiying2007斑竹
谢谢啊!!
感激不尽.以后多向你学习
积分
12
阅读权限
10
在线时间
7 小时
注册
2007-4-22
最后登录
2008-7-4
查看详细资料
TOP
fishcynn
龙江曦月
中级会员
帖子
220
体力
440
威望
0
当前
福建 泉州
离线
2 天
发短消息
专长
网页设计,前端制作,ASP
5
#
大
中
小
发表于 2008-5-12 15:23
- -这个效果不错.
积分
440
阅读权限
30
性别
男
在线时间
84 小时
注册
2007-1-15
最后登录
2008-7-4
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
版块跳转 ...
> 前台制作与脚本专栏
> 后台数据库编程
> WEB标准化专栏
> WAP 技术专栏
> 艺术与设计论坛
> Adobe Photoshop 专栏
> Fireworks 专栏
> 矢量图形专栏
> 插画手绘交流
> 用户体验综合版
> UI图形设计
> Flash 8 及之前版本
> Flash CS3 及 AS3
> Silverlight 专版
> Director 专栏
> 计算机技术
> 英语学习和技术翻译
> 摄影欣赏与技术交流
> 无线通讯与数码设备
> 企业招聘
> 体育运动、线下活动与游戏
> 创业版
做西部数码代理.Cn1元国际45元