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>