看到很多网站上都有这样的效果，感觉很不错。想据为己有，但是扣起来实在是太麻烦，于是自己写了一个。下面是简单的代码实现（只实现了基本的功能，样式和一些细节还没修改来）
和以前一样，整合到了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.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];
};
/**
* 在显示相应的标题
* @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">
dojo.require("com.hf.rollAd.RollerAd");
var rollerAd = null;
dojo.addOnLoad(
function(){
vartitles=["1","2"];
var picUrls=["1","2"];
varlinks=["1","2"];
vartitleContainerId="titlePane";
varpicContainerId="pic";
varmanualControlContainerId="manualPane";
varchandeSecond = 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>
分享到：
相关推荐
本代码有图片定时展示功能和光标划过图片按钮，显示相应图片功能 本来不想自己做，下载了一个别人做好的代码，但用了另外一个定时功能后，这个就无法正常显示了，于是就自己动手编写了这个功能，代码竟然还没那个...
web前端开发们需要很那些效果打交道,早上事情不多,分享一个javascript实现的绚丽图片展示效果,很适合在产品页面中出现. 这个效果主要和mootools结合一起使用的.
实现在页面里动态显示图片，每隔一秒换一张图片
javascript 实现图片轮转效果，效果页面可查看当当品牌店铺
javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询...
使用javascript实现flash的图片显示效果。
主要介绍了JavaScript实现多张图片放大镜效果,结合实例形式分析了javascript实现不限定图片尺寸,采用rem单位的多张图片缩放功能相关操作技巧,需要的朋友可以参考下
这是一个完全用JavaScript实现的图片切割效果实例，可以设置全透明、换图片、设置图片大小等。
JavaScript实现鼠标移入图片放大效果，JavaScript实现鼠标移入图片放大效果，好东西大家共享
javascript实现的图片点击水波荡漾效果 javascript实现的图片点击水波荡漾效果
javascript实现开门效果
任意多图的焦点图片切换效果...... 源码很简单,可以随意嵌套
JavaScript实现简单的轮播图效果 轮播图：在一个模块或者说窗口，通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。 如何实现轮播图 如何才能在js里面...
用户控件直接就可用。好资源不解释。还有生成的sql数据库文件，运行一遍就自己建好数据库了，图片文件夹复制过去就可以。
javascript实现点击网页图片，然后放大图片的效果
javascript实现图片局部放大效果
纯javascript实现文字、图片无限滚动效果
主要为大家详细介绍了JavaScript实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript 实现的进度条效果 javascript 实现的进度条效果
通过原生JavaScript+Css实现图片滑块效果，通过拖动按钮实现推拉门效果.