Библиотека Javascript SE@RCHER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<HTML><HEAD>
<TITLE>Блоки (фото) автоматически меняются c анимацией (фильтр fade растворение)</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<head>
<style type="text/css">
div.cf_wrapper {  position: relative;}
div.cf_element {width: 220px;background-color: #eee;border: 1px solid #ccc;}
div.cf_element div.content { padding: 10px;}
div.cf_element div.content h3 {	padding-top: 0;	margin-top: 0;}
#wrapper {width: 220px;	margin: 10px auto;text-align: left;  clear: both;}
</style>
<script type="text/javascript">
var useBSNns;if(useBSNns){if(typeof(bsn)=="undefined")
bsn={}
var _bsn=bsn;}else{var _bsn=this;}
_bsn.Crossfader=function(divs,fadetime,delay){this.nAct=-1;this.aDivs=divs;for(var i=0;i<divs.length;i++){document.getElementById(divs[i]).style.opacity=0;document.getElementById(divs[i]).style.position="absolute";document.getElementById(divs[i]).style.filter="alpha(opacity=10)";document.getElementById(divs[i]).style.visibility="hidden";}
this.nDur=fadetime;this.nDelay=delay;this._newfade();}
_bsn.Crossfader.prototype._newfade=function(){if(this.nID1)
clearInterval(this.nID1);this.nOldAct=this.nAct;this.nAct++;if(!this.aDivs[this.nAct])this.nAct=0;if(this.nAct==this.nOldAct)
return false;document.getElementById(this.aDivs[this.nAct]).style.visibility="visible";this.nInt=50;this.nTime=0;var p=this;this.nID2=setInterval(function(){p._fade()},this.nInt);}
_bsn.Crossfader.prototype._fade=function(){this.nTime+=this.nInt;var ieop=Math.round(this._easeInOut(this.nTime,0,1,this.nDur)*100);var op=ieop/100;document.getElementById(this.aDivs[this.nAct]).style.opacity=op;document.getElementById(this.aDivs[this.nAct]).style.filter="alpha(opacity="+ieop+")";if(this.nOldAct>-1){document.getElementById(this.aDivs[this.nOldAct]).style.opacity=1-op;document.getElementById(this.aDivs[this.nOldAct]).style.filter="alpha(opacity="+(100-ieop)+")";}
if(this.nTime==this.nDur){clearInterval(this.nID2);if(this.nOldAct>-1)
document.getElementById(this.aDivs[this.nOldAct]).style.visibility="hidden";var p=this;this.nID1=setInterval(function(){p._newfade()},this.nDelay);}}
_bsn.Crossfader.prototype._easeInOut=function(t,b,c,d){return c/2*(1-Math.cos(Math.PI*t/d))+b;}
</script>
</head>
<body>
<div id="wrapper">
<div class="cf_wrapper">
<div class="cf_element" id="cf1">
<div class="content">
<img src="http://www.03www.ru/pic/001.jpg" width=200 alt="">
</div>
</div>
<div class="cf_element" id="cf2">
<div class="content">
<img src="http://www.03www.ru/pic/002.jpg" width=200 alt="">
</div>
</div>
<div class="cf_element" id="cf3">
<div class="content">
<img src="http://www.03www.ru/pic/003.jpg" width=200 alt="">
</div>
</div>
</div>
</div>
<script type="text/javascript">
 var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );
</script>
</body>  
</html>