javascript 实现多张图片轮流展示效果

看到很多网站上都有这样的效果，感觉很不错。想据为己有，但是扣起来实在是太麻烦，于是自己写了一个。下面是简单的代码实现（只实现了基本的功能，样式和一些细节还没修改来）和以前一样，整合到了dojo中了，现在用的是1.0基本的原理很简单，在一个固定的地方展示图片和标题。这里用的是数组。指定展示图片用的id，以及展示标题的容器id。还有就是根据图片数组长度，动态创建一系列的手动切换按钮，

好风软件工作日

4058人浏览 · 2008-01-04 16:59:00

好风软件工作日 · 2008-01-04 16:59:00 发布

看到很多网站上都有这样的效果，感觉很不错。想据为己有，但是扣起来实在是太麻烦，于是自己写了一个。下面是简单的代码实现（只实现了基本的功能，样式和一些细节还没修改来）

和以前一样，整合到了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 >

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...