Javascript umbasteln, brauche Hilfe

T

tarnkappe

Hallo zusammen

Ich habe dieses Script auf einer Seite gefunden, es handelt sich um eine Slideshow.
Eine beliebige Anzahl von Bildern wird in einer Tabelle nacheinander geladen, ein Bild kommt das vorige geht.
Ich wollte das etwas abändern und zwar so das die Tabelle aus 1 Zeile und 5 Spalten besteht.

Das erste Bild was in jeder Spalte vorhanden ist beim öffnen der Seite ist ein Farbfeld welches die Farbe meines Seitenhintergrundes hat. Dann soll in die erste Spalte ein Bild "geslided" werden und dort bleiben.
Dann das zweite Bild in die zweite Spalte und dort bleiben und so weiter bis alle 5 Bilder geladen wurden.

Kann mir da jemand behilflich sein?

Mfg
tarnkappe

//Andreas: Lange Codestücke bitte in die dafür vorgesehenen Tags setzen
HTML:
=========================================================== 
Script: JavaScript Cross-Browser SlideShow Script 
With Cross-Fade Effect between Images 
Adjustable Timing and Unlimited Images 
Function: Displays images continuously in a slideshow 
presentation format, with a fade effect on 
image transitions. 
Browsers: All common browsers: NS3-6, IE 4-6 
Fade effect only in IE; others degrade gracefully 
Author: etLux 
=========================================================== 

Step 1. 
Put the following script in the head of your page: 

<script> 
// (C) 2000 www.CodeLifter.com 
// www.codelifter.com 
// Free for all users, but leave in this header 
// NS4-6,IE4-6 
// Fade effect only in IE; degrades gracefully 

// ======================================= 
// set the following variables 
// ======================================= 

// Set slideShowSpeed (milliseconds) 
var slideShowSpeed = 5000 

// Duration of crossfade (seconds) 
var crossFadeDuration = 3 

// Specify the image files 
var Pic = new Array() // don't touch this 
// to add more images, just continue 
// the pattern, adding to the array below 

Pic[0] = '1.jpg' 
Pic[1] = '2.jpg' 
Pic[2] = '3.jpg' 
Pic[3] = '4.jpg' 
Pic[4] = '5.jpg' 

// ======================================= 
// do not edit anything below this line 
// ======================================= 

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> 

=========================================================== 

Step 2. 
Put this onload event call in your body tag: 

<body onload="runSlideShow()"> 

=========================================================== 

Step 3. 
Put this in the body of your page where you want the 
slide show to appear. 

Set widths and heights same as images 
Set image file same as first image in array Pic[] (above) 

<table border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td id="VU" height=150 width=150> 
<img src="1.jpg" name='SlideShow' width=150 height=150></td> 
</tr> 
</table>
 
Zuletzt bearbeitet von einem Moderator:
Hallo,

erstmal der Code
HTML:
<html>
<head>
<script type="text/javascript">
// (C) 2000 www.CodeLifter.com
// www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 4000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.gif'
Pic[1] = '2.gif'
Pic[2] = '3.gif'
Pic[3] = '4.gif'
Pic[4] = '5.gif'

var imgOffset = new Array()
imgOffset[0] = 0;
imgOffset[1] = 1;
imgOffset[2] = 2;
imgOffset[3] = 3;
imgOffset[4] = 4;

// =======================================
// do not edit anything below this line
// =======================================

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[imgOffset[j]].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>
</head>

<body onload="runSlideShow()">

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="0.gif" width=150 height=150></td>
<td><img src="0.gif" width=150 height=150></td>
<td><img src="0.gif" width=150 height=150></td>
<td><img src="0.gif" width=150 height=150></td>
<td><img src="0.gif" width=150 height=150></td>

</tr>
</table>
</body>
</html>

Erklärung: Ich hab dir die fünf spalten in die Tabelle eingefügt und zusätlich ein Array "imgOffset". Auf die Bilder wird nicht mehr mit dem Namen angesprochen sondern über ihren Index. In dem Array musst du jetzt einfach den Index der Bilder angeben. Das erste Bild das im Quellcode der Seite auftaucht hat den Index 0, das zweite die 1 usw... Wenn das nich ganz klar ist einfach nochmal nachfragen.

Ich hab dir ein Beispiel mit hochgeladen...

ciao
Andreas
 

Anhänge

Neue Beiträge

Zurück