zoukankan      html  css  js  c++  java
  • Banner 切换,大小图不同,支持FF和OPERA,IE系列

     持所有浏览器,包括IE8,FF和OPERA

    http://www.corange.cn//uploadfiles/2009102201_48935.jpg


    <!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

  • 相关阅读:
    JavaScript table, grid, tree view or Gantt chart | TreeGrid
    Sign in
    DHtmlx Gantt
    Gantt Chart in JavaScript (HTML5) | FusionCharts
    无插件ExtJs4简单甘特图 / 蓝讯
    jsGantt(甘特图控件)
    FREE javascript gantt
    Python-Gantt
    JavaScript UI Library, Ajax Components & HTML5 Framework
    我的SPE甘特图
  • 原文地址:https://www.cnblogs.com/zerogo/p/2209095.html
Copyright © 2011-2022 走看看