Banner.js

Per S

3.00/5 (4投票s)

2003年10月9日

88485

一种面向对象的方法来显示横幅。

引言

我一直在寻找一个 JavaScript 横幅解决方案，以便在我的网站上运行横幅，这时我发现了 BarelyFitz JavaScript 幻灯片。这是我见过的最好的幻灯片脚本，我决定将其用于我的横幅。

继承

“借用”他人代码的最简单方法是通过继承。使用 Nicholas C. Zakas 的技术可以让 JavaScript 中的继承变得轻而易举。

Object.prototype.extend = function (oSuper) { 
       for (sProperty in oSuper) { 
               this[sProperty] = oSuper[sProperty]; 
       } 
}

function ClassA () { 
} 

function ClassB() { 
       this.extend(new ClassA()); 
}

Banner 类

我编写这个 banner 类，是为了能够在同一页面上拥有两个（或更多）横幅。banner 类充当 slideshow 类的包装器，并继承 slideshow 的方法和属性。

你可以在这里找到演示。

先决条件

BarelyFitz JavaScript slideshow.js。

代码

<HEAD>
<SCRIPT type="text/javascript" src="slideshow.js"></SCRIPT>
<SCRIPT language="JavaScript1.3" type="text/javascript">
<!--//

// From "Rethinking JavaScript Objects"
// makes it easy to inherit/extend an object
Object.prototype.extend = function (oSuper) { 
       for (sProperty in oSuper) { 
               this[sProperty] = oSuper[sProperty]; 
       }
}

// Banner(), a slideshow wrapper
// syntax:
//      var oVar = new Banner("oVar",url|urlarry [,target])
//      Note: oVar must be the same as the first parameter to Banner - "oVar"
//            the third parameter - target - is optional      
//            see sample use
function Banner (id,url) { 
    //inherit methods and properties from slideshow()
    this.extend(new slideshow()); 

    //set inherited property 'name', required ref slideshow documentation
    this.name = id;

    //set target if defined
    if (arguments[2]) 
        this.target = arguments[2];
    else
        this.target = '_self';
    
    // images(), local method that adds images to the object
    this.images = function() {
        for(i=0;i<arguments.length;i++){ 
            // Create a slide
            s = new slide();
            s.src =  arguments[i];
            if (typeof(url) == 'string')
                s.link = url;
            else
                s.link = url[i];
            s.target = this.target;
            
            // inherited method, see slideshow documentation
            this.add_slide(s);
        }    
     }    
}



// create the first banner object, all images points to the same location

var firstBanner = new Banner("firstBanner","http://soderlind.no/","_blank");

 
// create the second banner object, each image points to a different location

var arrURLs = new Array(
     "https://codeproject.org.cn"
    ,"http://soderlind.no/"
    ,"http://syndicated.INFO/"
);
var secondBanner = new Banner("secondBanner",arrURLs,"_blank");


// onload, init the banner objects and start them

function initBanner() {
    if (document.images) {
        //
        // firstBanner
        //
        firstBanner.images(
             "http://soderlind.no/images/soderlind468x60.gif"
            ,"http://soderlind.no/images/soderlind468x60-black.gif"
        );
        // image, timeout, update() and play() are inherited,
        // see slideshow documentation
        firstBanner.image = document.images.BANNER1;
        firstBanner.timeout = 5000;
        firstBanner.update();
        firstBanner.play();
        //
        // secondBanner
        //
        secondBanner.images(
             "https://codeproject.org.cn/images/codeproject468x60.gif"
            ,"http://soderlind.no/images/soderlind468x60.gif"
            ,"http://syndicated.info/i/gfx/logo.gif"
        );
        secondBanner.image = document.images.BANNER2;
        secondBanner.timeout = 7000;
        secondBanner.update();
        secondBanner.play();
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="initBanner();">

<!-- firstBanner.hotlink() is inherited, see slideshow documentation -->
<A href="javascript:void(0)" onClick="firstBanner.hotlink();return false;">
    <IMG name="BANNER1" src="http://soderlind.no/images/soderlind468x60.gif" 
    width="468" height="60" border="0">
</A>

<A href="javascript:void(0)" onClick="secondBanner.hotlink();return false;">
  <IMG name="BANNER2" 
  src="https://codeproject.org.cn/images/codeproject468x60.gif"  
  width="468" height="60" border="0">
</A>
</BODY>

祝你编码愉快。