Horizontal-Stripes-Slideshow

Moderator: HTML-Laie

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

Horizontal-Stripes-Slideshow

Beitrag von Hape »

Fügen Sie Ihrer Diashow einen CROSSBROWSER-Übergangseffekt hinzu Jedes Bild hat einen eigenen Link. Einfache Konfiguration.

Code: Alles auswählen

<script language="JavaScript">
<!-- Beginning of JavaScript -

// CREDITS:
// Simple Slideshow with lines 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]="backpic1253.jpg"
imgsname[1]="backpic2253.jpg"
imgsname[2]="backpic3253.jpg"

// the links for each slide. 
var imgsurl = new Array()
imgsurl[0]="http://www.yahoo.com"
imgsurl[1]="http://www.google.com"
imgsurl[2]="http://www.excite.com"

// 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]="stripes0.gif"
coverimage[1]="stripes1.gif"
coverimage[2]="stripes2.gif"
coverimage[3]="stripes3.gif"
coverimage[4]="stripes4.gif"
coverimage[5]="stripes5.gif"
coverimage[6]="stripes6.gif"
coverimage[7]="stripes7.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='backpic1253.jpg' 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

// - End of JavaScript - -->
</script>
Hier dazu die Demoseite: Horizontal-Stripes

stripes.zip
(4.92 KiB) 129-mal heruntergeladen

Antworten