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

来源：动视网责编：小采时间：2020-11-27 20:39:19

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

多浏览器兼容的qq图片轮换效果javascript代码_图象特效: js图片轮换效果代码_脚本之家 22吨重挖掘机中星九号直播考后表情 1 2 3 function $(v){return document.getElementById(v)} var img = $(bimg).getElementsByTagName

推荐度：

点击下载本文 文档为doc格式

导读多浏览器兼容的qq图片轮换效果javascript代码_图象特效: js图片轮换效果代码_脚本之家 22吨重挖掘机中星九号直播考后表情 1 2 3 function $(v){return document.getElementById(v)} var img = $(bimg).getElementsByTagName

<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> 
 
 <IMG height=170 src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/20080610123614199.jpg" 
 width=150> 
 <IMG height=170 src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/200806101236155.jpg" 
 width=150> 
 <IMG height=170 src="https://www.gxlcms.com/Uploads-s/new/2019-09-25-201925/20080610123619426.jpg" 
 width=150> 
 </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> 
 22吨重挖掘机 
 中星九号直播 
 考后表情 
</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> 
  
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();

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

推荐度：

点击下载本文 文档为doc格式

标签： QQ qq浏览器特效

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐