javascript 实现多张图片轮流展示效果
看到很多网站上都有这样的效果，感觉很不错。想据为己有，但是扣起来实在是太麻烦，于是自己写了一个。下面是简单的代码实现（只实现了基本的功能，样式和一些细节还没修改来）和以前一样，整合到了dojo中了，现在用的是1.0基本的原理很简单，在一个固定的地方展示图片和标题。这里用的是数组。指定展示图片用的id，以及展示标题的容器id。还有就是根据图片数组长度，动态创建一系列的手动切换按钮，
·
看到很多网站上都有这样的效果，感觉很不错。想据为己有，但是扣起来实在是太麻烦，于是自己写了一个。下面是简单的代码实现（只实现了基本的功能，样式和一些细节还没修改来）
和以前一样，整合到了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(){
var titles=["1","2"];
var picUrls=["1","2"];
var links=["1","2"];
var titleContainerId="titlePane";
var picContainerId="pic";
var manualControlContainerId="manualPane";
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>
云原生社区为您提供最前沿的新闻资讯和知识内容
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)