This page has been robot translated, sorry for typos if any. Original content here.

Slide Show JavaScript



Якщо ви хочете на обмеженому просторі веб сторінки розмістити багато картинок, то можна скористатися досить простим Java скриптом слайдшоу:


<code>&amp;lt;SCRIPT&amp;gt; var slideShowSpeed = 3000 var crossFadeDuration = 3 var Pic = new Array() Pic[0] = '/img/site/java_slideshow/1.jpg' Pic[1] = '/img/site/java_slideshow/2.jpg' Pic[2] = '/img/site/java_slideshow/3.jpg' var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i &amp;lt; p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)" document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src = preLoad[j].src if (document.all){ document.images.SlideShow.filters.blendTrans.Play() } j = j + 1 if (j &amp;gt; (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } &amp;lt;/SCRIPT&amp;gt;</code>

тут
1.jpg, 2.jpg, 3.jpg - послідовно виводяться картинки з папки / img / site / java_slideshow /
var slideShowSpeed = 3000 час затримки виведення картинок.
blendTrans (duration = .. crossFadeDuration = зміна яскравості при виведенні картинок, що встановлює параметр затримки і яскравості.

Щоб активізувати ваше слайдшоу в тег <Body> вставте наступний параметр <BODY .. onload = runSlideShow () а в тому місці де будуть безпосередньо виводитися картинки потрібно вставити: <IMG class = img name = SlideShow src = "/ img / site / java_slideshow /1.jpg ">






Далі я приведу приклад Java скрипта який змінює яскравість картинки при наведенні на неї курсора миші:

<code>&amp;lt;SCRIPT&amp;gt; nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity; direction = 1; if (object.filters.alpha.opacity &amp;gt; destOp){ direction = -1; } delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta; if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object; nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate); } } &amp;lt;/SCRIPT&amp;gt;</code>

Щоб застосувати скрипт до конкретної зображенні необхідно вставити наступний код:

<A href=" ..big.jpg"> <IMG onmouseover = nereidFade (this, 100,30,10) style = "FILTER: alpha (opacity = 60)" onmouseout = nereidFade (this, 25,50,10) src = ".. small.jpg" border = 0 width = ".." height = ".."> </A>

Чисел багато, але все просто - вихідна прозорість картинки тут - alpha (opacity = 60), параметри зміни яскравості задаються кінцевої і початкової прозорістю альфа фільтра в%: nereidFade (this, 100,30,10), а третє число це крок її зміни (чим більше крок - тим швидше зміна, тут при наведенні прозорість буде рости з 30 до 100% з кроком +10 при наведенні: onmouseover і після наведення миші: onmouseout буде падати з 50 до 25%)

Тепер справа тільки за вибором картинок, і ваші відвідувачі будуть приємно здивовані як вам вдалося так оригінально оформити веб сторінку ..






Наступний скрипт плавно змінює колір посилання при наведенні на неї курсора:

<code>&lt;script&gt;document.onmouseover = domouseover; document.onmouseout = domouseout; function domouseover() { if(document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") &gt; -1) { var linkName = srcElement.name; fadein(linkName); } } } function domouseout() { if (document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") &gt; -1) { var linkName = srcElement.name; fadeout(linkName); } } } function makearray(n) { this.length = n; for(var i = 1; i &lt;= n; i++) this[i] = 0; return this; } hexa = new makearray(16); for(var i = 0; i &lt; 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; function hex(i) { if (i &lt; 0) return "00"; else if (i &gt; 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16];} function setbgColor(r, g, b, element) { var hr = hex(r); var hg = hex(g); var hb = hex(b); element.style.color = "#"+hr+hg+hb; } function fade(sr, sg, sb, er, eg, eb, step, direction, element){ for(var i = 0; i &lt;= step; i++) { setTimeout("setbgColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); } } function fadeout(element) { fade(255,0,0, 0,0,255, 20, 1, element); } function fadein(element) { fade(0,0,255, 255,0,0, 20, 1, element); } &lt;/script&gt;</code>

Колір задається в кінці скрипта в RGB форматі:
function fadeout (element) {fade (255,0,0, 0,0,255, 20, 1, element); }
function fadein (element) {fade (0,0,255, 255,0,0, 20, 1, element); }

Після виклику скрипта для зміни кольору посилання в її тег слід вставити параметр:
<b> <a href="http:" name="fading_link1" class="fade"> Посилання 1 </a> <br>
<a href="http:" name="fading_link2" class="fade"> Посилання 2 </a> </ b>