多浏览器兼容的qq图片轮换效果javascript代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 多浏览器兼容的qq图片轮换效果javascript代码

Javascript: Javascript实例教程(12) 隐藏script代码; Javascript实例教程(11) 创建\"后退\"按钮; HTC：浏览器上的舞者; JavaScript 小技巧(第四集); Javascript实例教程(20) 使用HoTMetal(7); 点一下，首页地址添加到收藏夹(javascript); Javascript设计漫天雪花; Javascript实例教程(21) OLE Automation(2); Javascript实例教程(20) 使用HoTMetal(3); Javascript制作闪烁的边框; JavaScript对象与数组参考大全; Javascript实例教程(21) OLE Automation(3); 利用JavaScript制作倒计时牌; Javascript实例教程(5) 利用Javascript创建对象; 利用JAVASCRIPT制作简单动画; Javascript实例教程(15) JS代替CGI; Javascript实例教程(19) 数组; JavaScript[对象.属性]集锦之三; Javascript实例教程(21) OLE Automation(6); JavaScript 小技巧(第一集)

No. « ‹ 9 10 11 12 › »

技术文章搜索

关键字

Javascript 中的多浏览器兼容的qq图片轮换效果javascript代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 198 ::

收藏到网摘: n/a

javascript搜索自动提示功能的实现 javascript 建设银行登陆键盘

今日发现qq的图片轮换效果代码不错，兼容多浏览器，测试了ie和firefox效果不错

点击运行可以看到效果:

<!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>js图片轮换效果代码_软晨学习网</title>
</head>
<body>
<TABLE class=bdc6 height=359 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD vAlign=top> <TABLE height=6 cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD></TD></TR></TBODY></TABLE> <TABLE height=170 cellSpacing=0 cellPadding=0 width=150 align=center border=0> <TBODY> <TR> <TD vAlign=top height=170> <DIV id=bimg style="WIDTH: 150px; HEIGHT: 170px"> <DIV class=undis style="WIDTH: 150px; HEIGHT: 170px"><IMG height=170 src="/upload/tech/20091012/20091012091849_3a0772443a0739141292a5429b952fe6.jpg" width=150></DIV> <DIV class=dis style="WIDTH: 150px; HEIGHT: 170px"><IMG height=170 src="/upload/tech/20091012/20091012091856_3295c76acbf4caaed33c36b1b5fc2cb1.jpg" width=150></DIV> <DIV class=dis style="WIDTH: 150px; HEIGHT: 170px"><IMG height=170 src="/upload/tech/20091012/20091012091912_d1f491a404d6854880943e5c3cd9ca25.jpg" width=150></DIV> </DIV></TD></TR></TBODY></TABLE> <TABLE height=24 cellSpacing=0 cellPadding=0 width=150 align=center border=0> <TBODY> <TR> <TD class=f14 id=info width=227> <DIV class=dis>22吨重挖掘机</DIV> <DIV class=dis>中星九号直播</DIV> <DIV class=dis>考后表情</DIV>
</TD> <TD width=59> <TABLE id=simg cellSpacing=0 cellPadding=2 width="100%" align=right border=0> <TBODY> <TR align=middle> <TD class=s>1</TD> <TD>2</TD> <TD>3</TD> </TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE> <SCRIPT>
function $(v){return document.getElementById(v)}
var img = $("bimg").getElementsByTagName("div");
var td = $("simg").getElementsByTagName("td");
var text = $("info").getElementsByTagName("div");
var now = 1;
var count = 3; //设置数量
var def = 0; //默认显示
var speed = 1000; //10秒
//initialize
for(var i=0;i<count;i++){ //td td[i].name = i; td[i].className = ""; td[i].onclick = function (){changeBar(this.name)} td[i].onmouseover = function(){clearAuto()} td[i].onmouseout = function(){setAuto()} //img img[i].style.display = "none"; img[i].onmouseover = function(){clearAuto()} img[i].onmouseout = function(){setAuto()} //text text[i].style.display = "none"; text[i].onmouseover = function(){clearAuto()} text[i].onmouseout = function(){setAuto()}
}
//set default
td[def].className = "s";
img[def].style.display = "block";
text[def].style.display = "block";
function setClass(v){ for(var i=0;i<count;i++) td[i].className = ""; td[v].className = "s";
}
function setImg(v){ try{ with (bimg){ filters[0].Apply(); for(var i=0;i<count;i++){ img[i].style.display = "none"; text[i].style.display = "none"; } img[v].style.display = "block"; text[v].style.display = "block"; filters[0].play(); } } catch(e){ for(var i=0;i<count;i++){ img[i].style.display = "none"; text[i].style.display = "none"; } img[v].style.display = "block"; text[v].style.display = "block"; }
}
//contorl changed
function changeBar(v){ setClass(v); setImg(v); now= v+1;
}
//set Auto
var auto = '';
function setChange(){ if(now<count){ changeBar(now); } else{ now = 0; changeBar(now); }
}
function setAuto(){auto = setInterval("setChange()", speed)}
function clearAuto(){clearInterval(auto)}
setAuto();
</SCRIPT>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript搜索自动提示功能的实现 javascript 建设银行登陆键盘

Javascript 中的 多浏览器兼容的qq图片轮换效果javascript代码

评论 (0) All

Javascript 中的多浏览器兼容的qq图片轮换效果javascript代码