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.οnmοuseοver= function () {

               this .style.cursor= "pointer" ;

            } ;            

            span.οnclick= 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];

                                        

} ;