|
看到很多网站上都有这样的效果，感觉很不错。想据为己有，但是扣起来实在是太麻烦，于是自己写了一个。下面是简单的代码实现（只实现了基本的功能，样式和一些细节还没修改来）
和以前一样，整合到了dojo中了，现在用的是1.0
基本的原理很简单，在一个固定的地方展示图片和标题。这里用的是数组。指定展示图片用的id，以及展示标题的容器id。
还有就是根据图片数组长度，动态创建一系列的手动切换按钮，点击按钮就展示相应的图片和标题。目前仅实现了简单的功能。比在ie7,firfox2, Safari下做了简单测试。大体上就这个样子吧。
/**
* @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];
| 
