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

更新时间：2008年06月10日 12:34:58 作者：

今日发现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"><A                    href="http://news.qq.com/a/20080610/000271.htm"                    target=_blank><IMG height=170 src="/upload/20080610123614199.jpg"                    width=150></A></DIV>                   <DIV class=dis style="WIDTH: 150px; HEIGHT: 170px"><A                    href="http://news.qq.com/a/20080609/001999.htm"                    target=_blank><IMG height=170 src="/upload/20080610123618955.jpg"                    width=150></A></DIV>                   <DIV class=dis style="WIDTH: 150px; HEIGHT: 170px"><A                    href="http://news.qq.com/a/20080609/001901.htm"                    target=_blank><IMG height=170 src="/upload/20080610123619426.jpg"                    width=150></A></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 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

js 加载时自动调整图片大小
又一个javascript自动调整图片大小的脚本
2008-05-05
图片的左右移动，js动画效果实现代码
图片的左右移动，具备像荡秋千一样的动画效果，图片自己可重新定义，移动速度和距离也可在代码内设定，挺简单的Js生成动画的特效代码，仅供参考。
2010-12-12
非常漂亮的JS代码经典广告
非常漂亮的JS代码经典广告...
2007-10-10
最简单的js图片切换效果实现代码
最简单的js图片切换效果实现代码，需要的朋友可以参考下。
2011-09-09
纯JS实现的批量图片预览加载功能
需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片
2011-08-08
一个已封装好的漂亮进度条
一个已封装好的漂亮进度条...
2007-04-04
又一个小巧的图片预加载类
又一个小巧的图片预加载类...
2007-05-05
用dom+xhtml+css制作的一个相册效果代码打包下载
2008-01-01
用javascript制作放大镜放大图片
用javascript制作放大镜放大图片...
2006-07-07
Blocksit插件实现瀑布流数据无限( 异步)加载
BlocksIt 瀑布流插件是基于jquery的，使用也非常简单，是为数不多的几款动态瀑布流插件之一。
2014-06-06

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具