SLIDESHOW WITH ROMANTIC-TRANSITION-EFFEKT

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

SLIDESHOW WITH ROMANTIC-TRANSITION-EFFEKT

Beitrag von Hape »

Bist du verliebt? Verspüren Sie Frühlingsgefühle? Dieses „herzzerreißende“ DHTML-Crossbrowser-Skript verleiht Ihrer Diashow einen Hauch von Romantik. Tolle romantische Übergangseffektanimation. Jedes Bild hat einen eigenen Link. Einfache Konfiguration.

Code: Alles auswählen

<script>
// CREDITS:
// Slideshow with romantic transition effect by Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com.

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you have to insert a link to http://www.fabulant.com right into the webpage where the script
// will be displayed.

//////////////////////////// START OF CONFIGURATION ZONE //////////////////////////////

// The slides. Add as many as you like.
var imgsname = new Array()
imgsname[0]="backpic393.jpg"
imgsname[1]="backpic293.jpg"
imgsname[2]="backpic193.jpg"

// the links for each slide. 
var imgsurl = new Array()
imgsurl[0]="https://web.archive.org/web/20140406124701/http://www.fabulant.com"
imgsurl[1]="https://web.archive.org/web/20140406124701/http://www.fabulant.com"
imgsurl[2]="#"

// Configure the width of the slides (pixels)
var slideshow_width=163

// Configure the height of the slides (pixels)
var slideshow_height=163

// Configure the speed of the transition effect. Less means faster
var pause=80

// Configure the standstill-time of the images (seconds)
var standstill=1500

//////////////////////////// END OF CONFIGURATION ZONE //////////////////////////////


var imgstop=0
var imgsleft=0
document.write("<style type='text/css'>")
document.write(".imgsstyle	{position:absolute;left:-2000px;}")
document.write("</STYLE>")

var imgpreload=new Array()
for (i=0;i<=imgsname.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgsname[i]
}
var coverimage = new Array()
coverimage[0]="transheart0.gif"
coverimage[1]="transheart1.gif"
coverimage[2]="transheart2.gif"
coverimage[3]="transheart3.gif"
coverimage[4]="transheart4.gif"
coverimage[5]="transheart5.gif"
coverimage[6]="transheart6.gif"
coverimage[7]="transheart7.gif"
var covimgpreload=new Array()
for (i=0;i<=coverimage.length-1;i++) {
	covimgpreload[i]=new Image()
	covimgpreload[i].src=coverimage[i]
}
var i_imgs=0
var i_loop=0
var thisurl=0
var timer
stamdstill=standstill*1000

function init() {
	document.getElementById('imgs').style.top=imgstop
	document.getElementById('imgs').style.left=imgsleft
	document.getElementById('cover').style.top=imgstop
	document.getElementById('cover').style.left=imgsleft
	enlargehearts()
}

function enlargehearts() {
        if (i_loop<=coverimage.length-1) {   
 			imgcover.src=coverimage[i_loop]
            i_loop++
            timer= setTimeout("enlargehearts()",pause)  
        }
        else {
            clearTimeout(timer)
            i_loop--
            timer= setTimeout("shrinkhearts()",standstill)
       }
}

function shrinkhearts() {
        if (i_loop>=0) {  
			imgcover.src=coverimage[i_loop]
            i_loop--
            timer= setTimeout("shrinkhearts()",pause)
        }
        else {
            clearTimeout(timer)
            i_loop=0
            i_imgs++
            
            if (i_imgs>=imgsname.length) {i_imgs=0}
            imgsback.src=imgsname[i_imgs]
            timer= setTimeout("enlargehearts()",(4*pause))
        }
}

function gotourl() {
	document.location.href=imgsurl[i_imgs]
}

document.write("<div ID='roof' style='position:relative; width:"+slideshow_width+"px; height:"+slideshow_height+"px;'>")
document.write("<span ID='imgs' class='imgsstyle'><img width="+slideshow_width+" height="+slideshow_height+" name='imgsback' src='"+imgsname[0]+"' border=0 target='_blank'></span>")

document.write("<span ID='cover' class='imgsstyle'><a href='javascript:gotourl()'><img width="+slideshow_width+" height="+slideshow_height+" name='imgcover' src='stripes0.gif' border=0 target='_blank'></a></span>")
document.write("</div>")

window.onload=init
</script>
Hier die Demoseite dazu: Sliedeshow-Romatic

transheart.zip
(5.09 KiB) 182-mal heruntergeladen

Antworten