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

你可能感兴趣的:(JAVASCRIPT)