看到很多网站上都有这样的效果，感觉很不错。想据为己有，但是扣起来实在是太麻烦，于是自己写了一个。下面是简单的代码实现（只实现了基本的功能，样式和一些细节还没修改来）
和以前一样，整合到了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>
分享到：
相关推荐
在JavaScript中实现图片轮流显示是一项常见的网页动态效果需求，它能为用户带来更生动的视觉体验。本教程将深入探讨如何使用JavaScript实现这一功能，并提供详细的步骤和代码示例。 首先，我们需要理解基本的HTML...
在网页设计中，图片轮播是一种常见的展示方式，它能够以动态的形式展示多张图片，增强用户体验。本项目“页面实现多个图片轮播功能demo”旨在教你如何使用原生JavaScript来实现这一功能，同时通过调用同一函数实现...
总的来说，实现"图片切换轮流显示效果"是一个涉及多方面技术的综合任务，包括前端库的选择、JavaScript编程、CSS3动画、响应式设计以及性能优化等。随着Web技术的不断发展，这个过程也变得更加高效和灵活。
**jQuery图片轮流滚动展示**是一种常见的网页动态效果，用于在有限的空间内展示多张图片，增强用户体验，尤其适用于产品展示、相册浏览等场景。在这个特效中，图片会以渐入渐出的方式进行切换，营造出平滑而引人注目...
"多个图片渐变显示效果"就是一个典型的JavaScript实现的动态展示技术，它通过编程方式让多张图片轮流、渐变地显示在页面上，为用户提供平滑且引人入胜的视觉体验。这种效果在网站的轮播图、背景动画或者产品展示等...
本篇文章将详细讲解如何使用jQuery实现图片轮流播放的效果，这通常被称为图片轮播或幻灯片展示。 首先，我们需要了解jQuery的基本用法。jQuery对象通过$符号创建，它可以用来选择页面上的元素，例如`$("#elementID...
这种效果通常应用于图片展示模块，如轮播图、幻灯片或者产品展示区域，它使得多张图片能够以吸引人的方式交替显示，增加了视觉吸引力和交互性。 首先，我们要理解“图片轮流切换”的概念。这是一种常见的网页设计...
1. **图片轮播**：组件的核心功能是图片轮流展示，这通常通过定时器（`setInterval`或`setTimeout`）来实现，每隔一定时间自动切换到下一张图片。为了保证平滑过渡，可以使用CSS3的`transition`属性实现动画效果，...
标题中的“javascript一张图多广告切换”指的是使用JavaScript编程语言实现的一种动态广告展示效果，它能够在同一位置轮流显示多张广告图片，同时提供数字索引来指示当前显示的是哪一张广告。这种技术常用于网站的...
在JavaScript（JS）中，实现图片轮流显示的功能通常用于创建动态的横幅广告或轮播图效果。这种技术可以提高网站的视觉吸引力，使用户在访问时保持关注。以下是实现这一功能所需的关键知识点： 1. **DOM操作**：首先...
这种设计通常采用自动切换的方式，通过滑动或淡入淡出等动画效果，让多张图片在固定区域依次展示。下面将详细讨论这种广告实现的关键技术和相关知识点。 1. **图片轮播库**：为了实现横幅广告的自动切换功能，...
在网页设计中，"自动持续显示多张图片"是一种常见的需求，它不同于传统的幻灯片展示，而是让图片以某种方式连续、无缝地呈现。这种效果可以用来创建动态背景、滚动广告或者信息展示等。本篇文章将深入探讨如何实现...
总结起来，JavaScript 实现多张图片轮流播放幻灯片效果主要涉及以下几个步骤： 1. 创建全局对象并定义所需属性和方法。 2. 初始化轮播容器，设置样式和尺寸。 3. 添加图片项，创建并添加图片元素到DOM。 4. 启动...
在网页设计中，为了吸引用户注意力或展示一系列图片，经常采用动态展示图片的方式，其中“采用Flash形式轮流显示图片”是一种常见的技术手段。Flash是一种曾经广泛使用的交互式内容创作工具，它可以创建动画、图形...
纯JavaScript实现轮换广告是一种常见的前端技术，常用于网站中展示多张广告图片或内容，以吸引用户注意力并增加互动性。在这个项目中，我们主要关注如何使用纯JavaScript编写代码来实现这一功能，同时理解其背后的...
在实现图片轮切效果时，PHP会生成包含HTML和JavaScript代码的页面，这些代码负责在浏览器端控制图片的显示和切换。 HTML部分通常会包含一个`<div>`元素作为轮播容器，以及一组隐藏的`<img>`元素或者CSS背景图像来...
总结，js焦点广告轮流展示是提升商城类网站用户体验的重要工具，通过JavaScript的动态控制和丰富的视觉效果，可以有效地吸引用户注意力，同时通过优化策略确保性能和用户体验。在实际开发中，根据项目需求，可以灵活...
这种效果常见于网站的首页、产品展示、相册等，能够以优雅的方式展示多张图片，增强用户体验。 在网页开发中，图片轮播通常使用JavaScript、CSS以及HTML这三种核心技术来实现。JavaScript负责处理图片的切换逻辑，...
网页制作中的轮流显示是一种常见的视觉效果，用于展示多个元素或信息，如图片、广告或文本，按照一定顺序在页面上动态交替出现。这种效果能够吸引用户的注意力，增加页面的互动性和吸引力。在本主题中，我们将深入...
总结起来，通过原生jQuery实现图片轮流播放，主要涉及DOM操作、定时器以及动画效果。在实际项目中，还可以根据需求进行扩展，如添加分页指示器、键盘导航、触摸滑动等交互功能，以提升轮播图的用户体验。