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
>