兼容FF的图片切换代码

来源：经典论坛时间：2009-09-26 20:15:00　

下面这段代码是兼容IE的图片切换代码，请问各位老鸟如何兼容FF，或者有相类似无按钮无数字兼容FF的图片切换代码？

给你找了个兼容FF的：

<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Hello,Yang!</title></head><body><script type="text/javascript">var links = new Array();links[1] = "https://www.aspxhome.com/";links[2] = "http://www.cidianwang.com/";links[3] = "http://zidian.aspxhome.com/";links[4] = "http://baike.aspxhome.com/";links[5] = "http://www.ai-xue.com.cn/";var imgs = new Array();for(var n = 1; n <= 5; n++) imgs[n] = new Image();imgs[1].src = "/file/UploadPic/20099/26/1-91.jpg";imgs[2].src = "/file/UploadPic/20099/26/2-91.jpg";imgs[3].src = "/file/UploadPic/20099/26/3-25.jpg";imgs[4].src = "/file/UploadPic/20099/26/4-94.jpg";imgs[5].src = "/file/UploadPic/20099/26/5-31.jpg";var tits = new Array();tits[1] = "USB";tits[2] = "USB";tits[3] = "USB";tits[4] = "USB";tits[5] = "USB";var imgwidth = 436;//图片宽度var imgheight = 270;//图片宽度var str = "<style type='text/css'>";str += "#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;}";str += "#imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:18px!important;line-height:15px;font-size:9px;text-align:center;cursor:pointer;cursor:hand}";str += "#imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}";str += "#imgnv div.off{background:#323232;color:#FFF;text-decoration:none}";str += "#titnv{margin-top:3px;color:#000;text-align:center;display:none;}";str += "</style>";str += "<div style='position:relative'>";str += "<div><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' width='" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' onmouseover='Pause(true)' onmouseout='Pause(false)'></a></div>";//修改点1：循环添加内层div内容以增加个数str += "<div id='imgnv'><div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1</div><div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2</div><div id='it3' class='on' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3</div><div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='Pause(false)'>4</div></div>";str += "<div id='titnv'><b>" + tits[1] + "</b></div>";str += "</div>";document.write(str);var oi = document.getElementById("dimg");var pause = false;var curid = 1;var lastid = 1;var sw = 1;var opacity = 100;var speed = 15;var delay = (document.all)? 400:700;function SetAlpha(){if(document.all){if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;}else{oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;}}function ImgSwitch(id, p){if(p){pause = true;opacity = 100;SetAlpha();}oi.src = imgs[id].src;document.getElementById("dlink").href = links[id];document.getElementById("it" + lastid).className = "off";document.getElementById("it" + id).className = "on";document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";curid = lastid = id;}function ScrollImg(){if(pause && opacity >= 100) return;if(sw == 0){opacity += 2;if(opacity > delay){ opacity = 100; sw = 1; }}if(sw == 1){opacity -= 3;if(opacity < 10){ opacity = 10; sw = 3; }}SetAlpha();if(sw != 3) return;sw = 0;curid++;//修改点2：这里的4也是个数if(curid > 4) curid = 1;ImgSwitch(curid, false);}function Pause(s){pause = s;}function StartScroll(){setInterval(ScrollImg, speed);}function CheckLoad(){if (imgs[1].complete == true && imgs[2].complete == true) {clearInterval(checkid);setTimeout(StartScroll, 2000);}}var checkid = setInterval(CheckLoad, 10);</script></body></html>

标签：图片切换,代码,ff,兼容

投稿

兼容FF的图片切换代码

猜你喜欢

Oracle 8i在P4上的安装

SQL Server重温事务

try finally 妙用,防止内存泄漏

从SQL Server2000升级到2005的过程解析

javascript在线游戏：找相同的图片

数字人组件反写[asp组件开发实例4]

Access与Flash的结合应用

Css Reset(复位)整理

如何编写一个过滤掉HTML代码的函数？

Update 语句

简单仿LightBox效果

DateDiff函数在Sql与Access中的区别

谈谈网页一屏有多大？

在SUSE10环境下安装和配置MySQL数据库

ROW_NUMBER SQL Server 2005的LIMIT功能实现(ROW_NUMBER()排序函数)

Oracle 函数大全

asp HTTP_X_FORWARDED_FOR和REMOTE_ADDR

asp如何定时执行约定的页面？

Google中秋logo被恶搞

简单实用的图片播放器1.0(Javascript + css )

兼容FF的图片切换代码

猜你喜欢

Oracle 8i在P4上的安装

SQL Server重温 事务

try finally 妙用,防止内存泄漏

从SQL Server2000升级到2005的过程解析

javascript在线游戏：找相同的图片

数字人组件反写[asp组件开发实例4]

Access与Flash的结合应用

Css Reset(复位)整理

如何编写一个过滤掉HTML代码的函数？

Update 语句

简单仿LightBox效果

DateDiff函数在Sql与Access中的区别

谈谈网页一屏有多大？

在SUSE10环境下安装和配置MySQL数据库

ROW_NUMBER SQL Server 2005的LIMIT功能实现(ROW_NUMBER()排序函数)

Oracle 函数大全

asp HTTP_X_FORWARDED_FOR和REMOTE_ADDR

asp如何定时执行约定的页面？

Google中秋logo被恶搞

简单实用的图片播放器1.0(Javascript + css )

SQL Server重温事务