Banner 切换,大小图不同,支持FF和OPERA,IE系列
持所有浏览器,包括IE8,FF和OPERA
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<LINK media=screen href="banner_taobaowin/win2.css"
type=text/css rel=stylesheet>
</HEAD>
<BODY>
<DIV id=pic_tab>
<DIV class=slider>
<DIV class=img_400_215 id=homePushShow>
<P><A id=homePushShow0 style="DISPLAY: none"
href=""><IMG
src="banner_taobaowin/a.jpg"></A><A id=homePushShow1
style="DISPLAY: block"
href=""
target=_blank><IMG src="banner_taobaowin/b.jpg"></A><A
id=homePushShow2 style="DISPLAY: none"
href="" target=_blank><IMG
src="banner_taobaowin/c.jpg"></A><A id=homePushShow3
style="DISPLAY: none" href=""
target=_blank><IMG src="banner_taobaowin/d.jpg"></A></P></DIV>
<UL class="triggers clearfix" id=homePushName>
<LI class="" id=homeAd3><A href=""
target=_blank><SPAN><IMG
src="banner_taobaowin/dd.jpg"></SPAN></A> </LI>
<LI id=homeAd2><A href=""
target=_blank><SPAN><IMG
src="banner_taobaowin/cc.jpg"></SPAN></A> </LI>
<LI class="" id=homeAd0><A
href=""><SPAN><IMG
src="banner_taobaowin/aa.jpg"></SPAN></A> </LI>
<LI class=now id=homeAd1><A
href=""
target=_blank><SPAN><IMG
src="banner_taobaowin/bb.jpg"></SPAN></A> </LI></UL><!--[if !IE]>|xGv00|2494373556a448f9f0991eaae0589202<![endif]-->
<SCRIPT type=text/javascript>
if(!document.all){
HTMLElement.prototype.__defineGetter__("children",
function () {
var returnValue = new Object();
var number = 0;
for (var i=0; i<this.childNodes.length; i++) {
if (this.childNodes[i].nodeType == 1) {
returnValue[number] = this.childNodes[i];
number++;
}
}
returnValue.length = number;
return returnValue;
}
);
}
function randomInt(num1){
return Math.floor(Math.random()*num1);
};
//函数每隔t毫秒执行一次
Function.prototype.runEach = function(t){
var A = this;
var B = Array.prototype.slice.call(arguments,1);
var f = function(){
A.apply(null,B);
};
return setInterval(f, t);
};
//函数在t毫秒延时后执行
Function.prototype.runAfter = function(t){
var A = this;
var B = Array.prototype.slice.call(arguments,1);
var f = function(){
A.apply(null, B);
};
return setTimeout(f,t);
};
var picCount=document.getElementById("homePushName").children.length;
var canRoll=true;
var rollId=randomInt(picCount);
var timeTag=0;
function doRoll(){
//是否符合计时条件，如果不符合直接进入下一次等待,设置状态值
if(canRoll){
timeTag+=10;
if(timeTag>2500){
timeTag=0;
rollId=(rollId>picCount-2)?0:(rollId+1);
}
}
//显示当前的图片
for(var i=0;i<picCount;i++){
if(document.getElementById("homePushShow"+i).style.display != ((i==rollId)?"block":"none")){
document.getElementById("homePushShow"+i).style.display = ((i==rollId)?"block":"none");
};
if(document.getElementById("homeAd"+i).className!=((i==rollId)?"now":"")){
document.getElementById("homeAd"+i).className=(i==rollId)?"now":"";
};
}
}
for(var i=0;i<picCount;i++){
document.getElementById("homeAd"+i).onmouseover=function(){
canRoll=false;
rollId=parseInt(this.id.replace("homeAd",""));
timeTag=0;
}
document.getElementById("homeAd"+i).onmouseout=function(){
canRoll=true;
timeTag=0;
}
}
doRoll.runEach(20);
</SCRIPT>
</DIV></DIV>
</BODY></HTML>
用到的图片和CSS文件
http://www.corange.cn//uploadfiles/banner_taobaowin_34474.rar
原文地址:http://www.corange.cn/archives/2009/10/3480.html
