参照公司一个牛人写的js风格（使用prototype框架），完成了一个flash切换效果的功能。因为项目需求，这里切换的不是图片，而是一段广告，但是效果是一个个轮流切换的效果。
本人对prototype不熟，还在学习中。贴出代码，希望与各位交流一二，共同进步。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>imgflow.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
*{margin:0;padding:0}
img{border:0}
.green,.green a{color:#009245;}
a.green:hover,.green a:hover,a.unGreen{color:#009245; text-decoration:underline;}
a.unGreen:hover{color:#009245; text-decoration:none;}
.clearfix:after {clear:both; height:0; overflow:hidden; display:block; visibility:hidden; content:"."; }
.clearfix{zoom:1;}
.zise,.zise a{color:#662d91;}
a.zise:hover,.zise a:hover,a.unzise{color:#662d91; text-decoration:underline;}
a.unzise:hover{color:#662d91;}
.goThere{background:transparent url('images/bg001.png') no-repeat 0 0;height:144px;width:327px; margin: 0 auto; padding-left:9px;overflow: hidden;}
.goThere h2,.goMap h2,.searchBox h2{color:#009245; font-size:21px; font-weight:bold; padding:9px 0;}
.goThere dl{height:144px;}
.goThere dt{float:left; width:106px;text-align:center;}
.goThere dd{line-height:21px; float:right;width:216px; padding-right:5px; }
.goThere dd div{font-size:20px;font-weight:bold; margin-top:5px;}
.goThereNum{width:336px; margin: 0 auto; line-height:27px;background:transparent url('images/ulList01Bg.png') repeat-x left bottom; text-align:right;overflow: hidden;zoom:1}
.goThereNum a{margin-left:20px;text-decoration:underline;color:#000; float:right;}
.goThereNum a:hover{text-decoration:none;color:#000;}
.goThereNum a.here{color: red;}
</style>
<script type="text/javascript" src="js/protoculous-packer.js"></script>
</head>
<body>
<div class="goThere">
<h2>带你去马来西亚</h2>
<dl class="clearfix">
<dt><a href="/"><img src="images/gotherebg.png" alt=""/></a></dt>
<dd>
<p>马来西亚户外野营团-有导游陪同在马来西亚用餐真是一趟充满美事享受的经验之旅。</p>
<div class="green">每人<span class="zise">4899元</span>起</div>
</dd>
</dl>
<dl class="clearfix">
<dt><a href="/"><img src="images/gotherebg.png" alt=""/></a></dt>
<dd>
<p>aaa</p>
<div class="green">每人<span class="zise">4899元</span>起</div>
</dd>
</dl>
<dl class="clearfix">
<dt><a href="/"><img src="images/gotherebg.png" alt=""/></a></dt>
<dd>
<p>bbbb</p>
<div class="green">每人<span class="zise">4899元</span>起</div>
</dd>
</dl>
<dl class="clearfix">
<dt><a href="/"><img src="images/gotherebg.png" alt=""/></a></dt>
<dd>
<p>ccc</p>
<div class="green">每人<span class="zise">4899元</span>起</div>
</dd>
</dl>
</div>
</body>
</html>
<script>
(function init() {
Go10000.UI.AdRotator_dl = Class.create({
initialize: function(elem,delay){
this.imgs = $(elem).select("dl");
this.nav = new Element("div", {'class':'goThereNum'});
$(elem).insert({"after":this.nav});
this.nums = [];
if(delay != null)
this.delay = delay;
var i = 0;
var _self = this;
this.imgs.each(function(o) {
i++;
var a = new Element("a", {"class":i,"href":"#"}).update(i);
a.observe("click", function(evt) {
var curA = Event.element(evt);
if(!curA.hasClassName("here")) {
_self.imgs[_self.cur].hide();
_self.cur = curA.className*1-1;
_self.imgs[_self.cur].show();
var p = 0;
_self.nums.each(function(elem1) {
if(p == _self.cur) {
elem1.addClassName("here");
} else {
elem1.removeClassName("here");
}
p++;
});
}
}.bind(this));
this.nav.insert({"top":a});
this.nums.push(a);
}, this);
this.cur = 0;
this.nums[this.cur].addClassName("here");
},
start: function() {
this.shownext.bind(this).delay(3);
},
delay:3,
shownext: function() {
new Effect.Fade(this.imgs[this.cur], { duration:2, from:1.0, to:0.0});
this.cur++;
if(this.cur==this.imgs.length) this.cur=0;
var context = this;
new Effect.Appear(this.imgs[this.cur], { duration:2, from:0.0, to:1.0,
beforeStart: function() {
var p = 0;
context.nums.each(function(elem1) {
if(p == context.cur) {
elem1.addClassName("here");
} else {
elem1.removeClassName("here");
}
p++;
});
},
afterFinish: function() {
context.shownext.bind(context).delay(3);
}
});
}
});
var adrotator = new Go10000.UI.AdRotator_dl($$('.goThere')[0]);
adrotator.start();
})();
</script>
分享到：
相关推荐
【标题】"JS_模仿Flash交替图片显示"指的是使用JavaScript技术来实现类似Flash动画中图片轮播的效果。在Web开发中，这样的功能常用于创建滑动展示、广告轮播或图片画廊等交互式组件。JavaScript是一种轻量级的解释型...
本资源"javascript经典特效---jQuery仿动感flash自动滚动图片切换广告插件.rar"是一个基于jQuery实现的图片轮播插件，它模仿了早期Flash技术中的动态滚动效果，但在不依赖Flash的情况下提供了类似的用户体验。...
【描述】"这是一个仿iPhone斜拉的横向3D图片切换效果demo"，表明这是一个演示项目，它展示了如何通过编程技术模仿iPhone中图片切换时的滑动和3D变换。"实现了iPhone图片浏览的效果"意味着这个demo能够展示图片之间的...
26. **Flash风格菜单**：使用JavaScript和CSS模仿Flash动画的菜单效果，提供动态过渡和交互。 以上效果展示了JavaScript在网页交互、动画、用户反馈和页面控制等方面的强大功能。通过不断学习和实践，开发者可以...
"Flash切图效果版"是指利用Flash技术实现的一种图像展示方式，它模仿了PPT（PowerPoint）的幻灯片切换效果，以动态、美观的形式展示一系列图片。这种效果在早期网页设计中颇为流行，可以增强用户体验，吸引用户的...
综上所述，这个项目涉及到的技术和概念包括JavaScript基础、CSS样式设计、Flash动画、前端库的应用以及交互设计原则，这些是构建一个动态、吸引人的网页焦点图切换效果的关键。通过学习和实践这些知识，开发者可以...
在标题“左右图片切换，还有flash效果的”中，我们可以推测这是一种结合了传统Flash技术和现代图片切换效果的设计。Flash曾经是创建动态内容和交互元素的主流工具，尤其是在2000年代初期。尽管现在Flash已逐渐被...
"仿flash效果js切换视频背景主页模板" 这个标题指出，我们正在讨论一个网页设计模板，该模板使用JavaScript技术来模仿曾经流行的Adobe Flash的视觉效果，特别是涉及视频背景的切换功能。这表明模板可能包含动态和...
3. 图片资源文件：可能包括jpg、png或其他格式的图片，用于图片切换效果。 4. HTML文件：包含了嵌入SWF文件的HTML代码，以及可能的CSS样式和JavaScript脚本。 5. 其他资源：如字体文件、声音效果等。 在实际应用中...
这个“html5 canvas模仿flash的简单动画banner Demo”就是利用Canvas API来实现类似Flash的动态广告效果的一个实例。下面将详细探讨相关的知识点。 1. HTML5 Canvas API： - `canvas`元素：HTML5中的`<canvas>`...
标题中的“类似Flash的图片播放效果js”指的是使用JavaScript实现的一种动态图片展示技术，它旨在模仿Adobe Flash曾经提供的动画和交互性，但不依赖于Flash插件，因为Flash在现代浏览器中逐渐被淘汰。JavaScript是一...
3. **JavaScript文件**（*.js）：可能包含用于非Flash环境下的图片切换逻辑，例如使用jQuery或其它库实现。 4. **CSS样式表**（*.css）：用于定义相册的外观和布局。 5. **图片资源**（*.jpg或*.png）：实际展示的...
Flash曾经是创建交互式网页内容的主流工具，但由于其对移动设备支持不佳以及HTML5的崛起，现代网页设计更倾向于使用HTML、CSS3和JavaScript来模仿Flash的效果。以下将详细探讨如何利用这些技术实现类似Flash的页面...
【标题】：“模仿12530四屏FLASH焦点图”这一主题主要涉及的是网页设计与开发中的一个经典案例，即如何使用Flash技术创建一个具备四个屏幕展示效果的焦点图。这种焦点图通常用于网站的首页，以动态、吸引人的形式...
虽然现代Web开发更多地倾向于HTML5，但JavaScript仍然可以模拟Flash的某些效果，比如使用canvas或SVG进行动画制作。通过JavaScript控制时间轴，实现动态的导航栏过渡效果，如滑动、淡入淡出等。 4. **QQ式导航**：...
总之，《网易Flash XML清爽新闻切换》是一个结合了XML数据、Flash动画和JavaScript交互的经典示例，展示了早期网页动态效果的实现方式。虽然现代网页设计已转向更先进的技术，但理解这一历史背景和技术原理，对于...
4. **js做的flash效果**：虽然Flash已经不再流行，但这里可能是指用JavaScript模仿Flash的一些动态效果，如粒子动画、游戏等。JavaScript可以创建动态图形，结合Canvas或SVG元素，实现丰富的视觉效果。 5. **358....
这个插件模仿了Flash技术的图片展示效果，但避免了Flash的一些限制，如浏览器兼容性问题和移动设备支持不足。Flash曾是创建动态内容的流行工具，但在HTML5和JavaScript的崛起后，逐渐被替代。 Zoomer Gallery插件...
这个特定的广告切换效果采用缓动切换，模仿原始的Flash效果，为用户提供平滑而有吸引力的视觉体验。缓动切换是通过渐进改变速度来实现动画更自然、流畅的过渡。 该实现的核心功能包括： 1. **自动检测广告图片个数...