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];

                                        

} ;

/**

* 在显示相应的标题

* @return 返回 void

*/

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

 var titlePane = document.getElementById( this .titleContainerId);

 titlePane.innerHTML= this .titles[count];

                                        

} ;

}

 

 

下面是网页：

<%@ page language = "java" import = "java.util.*" pageEncoding = "UTF-8" %>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ;

%>

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd" >

< html >

< head >

< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >

 

< title > Editor Demo </ title >

    < style type = "text/css" >

        @import "<%=path%>/js/dojo1.0.1/dijit/themes/tundra/tundra.css";

        @import "<%=path%>/js/dojo1.0.1/dojo/resources/dojo.css"

    </style>

    < script type = "text/javascript" src = " <%= path %> /js/dojo1.0.1/dojo/dojo.js"

        djConfig = "parseOnLoad: true " ></ script >

        < script type = "text/javascript" >

        doj o.require("com.hf.rollAd .RollerAd");

        var rollerAd = null ;

       

        dojo.addOnLoad(

              function(){

                var  t i tle s=["1","2"];

                 var  pi c Url s=["1","2"];

                 va r  l ink s=["1","2"];

                 var titleCo ntainerId=" titlePane";

                 var picCo ntainerId ="pic";

                 var manualControlCo ntainerId="m anualPane";

                 var chandeSecond = 5;

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

                                  /*String*/ titleContainerId, /*String*/ picContainerId,

                                  /*String*/ manualControlContainerId,

                                  /*int*/ chandeSecond);

               

               rollerAd.init();

              

               setInterval( "rollerAd.showNext()" ,rollerAd.chandeSecond*1000);

           

            }

       

       

        );

      

     </script>

</ head >

< body class = "tundra" >

< div id = "titlePane" >

</ div >

< div style = "width:100px;height:100px" >

  < img id = "pic" src = "" style = "width:100px;height:100px" ></ img >

</ div >

< div id = "manualPane" >

</ div >

</ body >

</ html >