用javascript模仿flash切换效果
参照公司一个牛人写的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>