Блоки (фото) автоматически меняются c анимацией (фильтр fade растворение) Библиотека Javascript. SE@RCHER

<!DOCTYPE html> <html> <HEAD> <TITLE>Блоки (фото) автоматически меняются c анимацией (фильтр fade растворение)</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1251"> <base target='_blank'> <style type="text/css"> a{color: #000;} a:hover{color: green;} a:visited{color: #000;} a:active{color: red;} img{border:0} a,a:hover,a:visited,a:active{font-size: 12px;font-family: Tahoma, Verdana, Arial, MS Sans Serif;font-weight: bold;text-decoration: none;} div.cf_wrapper { position: relative;} div.cf_element {width: 150px;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: 150px; margin: 10px auto;text-align: left; clear: both;float:left} .content{text-align:center} </style> <script type="text/javascript"> document.addEventListener('load',function(){var a,e,i,imgs,fix=function(img,alt){if(img.hasAttribute('alt')){if(!img.hasAttribute('title')){img.setAttribute('title',img.getAttribute('alt'));}}else{img.setAttribute('alt',alt);}};e=document.createElement('span');e.innerHTML='?';a=e.firstChild.nodeValue;imgs=document.getElementsByTagName('img');for(i=0;i<imgs.length;i++)fix(imgs[i],a);imgs=document.getElementsByTagName('input');for(i=0;i<imgs.length;i++){if(imgs[i].hasAttribute('type')&&imgs[i].getAttribute('type').toLowerCase()=='image')fix(imgs[i],a);}},false); 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"> <a href="http://www.sadograd.ru/"><img src=r1.png width=130 alt="САДОГРАД"><br/>САДОГРАД</a> </div></div> <div class="cf_element" id="cf2"> <div class="content"> <a href="http://www.semenagrad.ru/"><img src=r2.png width=130 alt="СЕМЕНАГРАД"><br/>СЕМЕНАГРАД</a> </div></div> <div class="cf_element" id="cf3"> <div class="content"> <a href="http://www.03skazki.ru/"><img src=r3.png width=130 alt="ЛУЧШИЕ СКАЗКИ МИРА"><br/>СКАЗКИ</a> </div></div> <div class="cf_element" id="cf4"> <div class="content"> <a href="http://www.03www.su/slawuta50/"><img src=r4.png width=130 alt="ПОВЕСТЬ. ДЕТСТВО В СЛАВУТЕ"><br/>СЛАВУТА</a> </div></div> <div class="cf_element" id="cf5"> <div class="content"> <a href="http://www.dedhleb.ru/"><img src=r5.png width=130 alt="ХЛЕБОЗАВОД ДЕДОВСКИЙ ХЛЕБ"><br/>ХЛЕБОЗАВОД</a> </div></div> <div class="cf_element" id="cf6"> <div class="content"> <a href="http://www.txm.su/"><img src=r6.png width=130 alt="ТХМ"><br/>ТЕХМЕЛЬСЕРВИС</a> </div></div> <div class="cf_element" id="cf7"> <div class="content"> <a href="http://www.03www.su/120409/"><img src=r7.png width=130 alt="ХЛЕБОЗАВОДЫ МОСКВЫ И ПОДМОСКОВЬЯ"><br/>ХЛЕБОЗАВОДЫ</a> </div></div> <div class="cf_element" id="cf8"> <div class="content"> <a href="http://www.03pesni.ru/"><img src=r8.png width=130 alt="ИЗБРАННЫЕ ПЕСНИ"><br/>ПЕСНИ</a> </div></div> <div class="cf_element" id="cf9"> <div class="content"> <a href="http://www.03www.su/5/a001.html"><img src=r9.png width=130 alt="АНЕКДОТЫ"><br/>АНЕКДОТЫ</a> </div></div> <div class="cf_element" id="cf10"> <div class="content"> <a href="http://www.03www.su/latin/latin.html"><img src=r10.png width=130 alt="ЛАТЫНЬ"><br/>ЛАТЫНЬ</a> </div></div> <div class="cf_element" id="cf11"> <div class="content"> <a href="http://www.03pressa.ru/"><img src=r11.png width=130 alt="ИЗБРАННАЯ ПРОЗА">ПРОЗА</a> </div></div> <div class="cf_element" id="cf12"> <div class="content"> <a href="http://www.03www.su/rastenia/b10.php"><img src=r12.png width=130 alt="ФОТО РАСТЕНИЙ">ФОТО РАСТЕНИЙ</a> </div></div> <div class="cf_element" id="cf13"> <div class="content"> <a href="http://www.03www.su/plod/"><img src=r13.png width=130 alt="ФОТО РАСТЕНИЙ"><br/>ФОТО РАСТЕНИЙ</a> </div></div></div></div> <script type="text/javascript"> var cf = new Crossfader( new Array('cf1','cf2','cf3','cf4','cf5','cf6','cf7','cf8','cf9','cf10','cf11','cf12','cf13'), 500, 2000 ); </script> </body> </html>