javascript实现多张图片轮流展示效果代码

看到很多网站上都有这样的效果，感觉很不错。想据为己有，但是扣起来实在是太麻烦，于是自己写了一个。下面是简单的代码实现（只实现了基本的功能，样式和一些细节还没修改来）

和以前一样，整合到了dojo中了，现在用的是1.0

基本的原理很简单，在一个固定的地方展示图片和标题。这里用的是数组。指定展示图片用的id，以及展示标题的容器id。

还有就是根据图片数组长度，动态创建一系列的手动切换按钮，点击按钮就展示相应的图片和标题。目前仅实现了简单的功能。比在ie7,firfox2, Safari下做了简单测试。大体上就这个样子吧。 

 

下面是js

 

/**

* @fileoverview 定义了.

* @author hf

* @version 1.0

*/

if(!dojo._hasResource["com.hf.rollAd.RollerAd"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.

dojo._hasResource["com.hf.rollAd.RollerAd"] = true;

dojo.provide("com.hf.rollAd.RollerAd");

/**

* 图片轮流展示类

* @class 在一个窗口中轮番展示一些图片

* @constructor

* @titles {Array} 标题数组参数.

* @picUrls {Array}图片数组参数.

* @titleContainerId {String} 存放标题的容器id.

* @picContainerId {String} 存放图片的容器id.

* @manualControlContainerId {String} 存放转换控制的容器Id.

* @chandeSecond {int} 图片翻转的秒数.

* @return 返回一个com.hf.rollAd.RollerAd对象

*/

 

com.hf.rollAd.RollerAd = function (/*Array*/ titles, /*Array*/ picUrls,/*links*/ links,

                                  /*String*/titleContainerId,/*String*/picId,

                                  /*String*/manualControlContainerId,

                                  /*int*/ chandeSecond){

      /**

       *一组标题

       * @ type Array

      */

      this.titles=titles;

      /**

       *一组图片链接

       * @ type Array

      */

      this.picUrls=picUrls;

     

      this.links = links;

       /**

       *存放标题的容器id

       * @ type String

      */

      this.titleContainerId=titleContainerId;

       /**

       *存放图片的容器id

       * @ type String

      */

      this.picId=picId;

       /**

       *存放转换控制的容器Id

       * @ type String

      */

      this.manualControlContainerId=manualControlContainerId;

     

       /**

         *图片翻转的秒数

         * @ type int

       */

      this.chandeSecond=chandeSecond;

     

      /*存放翻转图片的按钮的数组*/

      this.buttonArray=[];

      /*记录当前的图片序号,*/

      this.currentCount= 0;

};

com.hf.rollAd.RollerAd.prototype.init=function (){

 

     /*初始化手动图片切换的钮的生成*/

     var manualControlContainer= document.getElementById(this.manualControlContainerId);

     if(manualControlContainer!=null){

        for(var i = 0;i<this.picUrls.length;i++){

            var span = document.createElement("span");

            span.innerHTML = ""+i;

            span.index=i;

            span.controller=this;

            span.onmouseover=function(){

               this.style.cursor="pointer";

            };           

            span.onclick=function(){              

                this.controller.show(this.index);        

               

            };

          

            this.addToManualPane(span);

          

            /*存入数组中去*/

            this.buttonArray[i] = span;

           

        }//for

       

     }//if    

    

     /*展示图片和标题层的数据*/

     this.show(0);   

                                

};

/**

* 将手动按钮增加到对应的层上

* @return 返回void

*/

 

com.hf.rollAd.RollerAd.prototype.addToManualPane=function (span){

   var manualControlContainer= document.getElementById(this.manualControlContainerId);  

   manualControlContainer.appendChild(span);

  

};

 

com.hf.rollAd.RollerAd.prototype.showNext=function (){

   if(this.currentCount>=this.picUrls.length){

      this.currentCount=0

  

   }else{

    this.currentCount++;

   }

   this.show(this.currentCount);                                      

};

/**

* 在显示相应的图片和标题

* @return 返回void

*/

 

com.hf.rollAd.RollerAd.prototype.show=function (count){

 if(count>=this.picUrls.length){

      this.currentCount=0

  

   }else{

    this.currentCount=count;

   }

   this.showPic(this.currentCount);

   this.showTitle(this.currentCount);

                                       

}; 

/**

* 在显示相应的图片

* @return 返回void

*/

com.hf.rollAd.RollerAd.prototype.showPic=function (count){

 var pic = document.getElementById(this.picId);

 pic.src=this.picUrls[count];

                                        

};