Slide Show JavaScript
Если вы хотите на ограниченном пространстве веб страницы разместить много картинок, то можно воспользоваться довольно простым Java скриптом слайдшоу:
<SCRIPT>
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 < 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 > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</SCRIPT>
Здесь
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 скрипта который меняет яркость картинки при наведении на неё курсора мыши:
<SCRIPT>
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 > 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);
} }
</SCRIPT>
Чтобы применить скрипт к конкретной картинке необходимо вставить следующий код:
<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 % )
Теперь дело только за выбором картинок, и ваши посетители будут приятно удивлены как вам удалось так оригинально оформить веб страничку..
Следующий скрипт плавно изменяет цвет ссылки при наведении на неё курсора:
<script>document.onmouseover = domouseover;
document.onmouseout = domouseout;
function domouseover() {
if(document.all){
srcElement = window.event.srcElement;
if (srcElement.className.indexOf("fade") > -1) {
var linkName = srcElement.name;
fadein(linkName);
} }
}
function domouseout() {
if (document.all){
srcElement = window.event.srcElement;
if (srcElement.className.indexOf("fade") > -1) {
var linkName = srcElement.name;
fadeout(linkName);
} }
}
function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}
hexa = new makearray(16);
for(var i = 0; i < 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 < 0)
return "00";
else if (i > 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 <= 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);
}
</script> Цвет задаётся в конце скрипта в 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>
Created/Updated: 25.05.2018