用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>