Zufallsreihenfolge von Bildern

[ninn]

Ich möchte im Header meines Forums eine kleine Diashow laufen lassen. Ein passendes JavaScript dazu habe ich auch gefunden. Leider werden da die Bilder immer in der selben Reihenfolge angezeigt, bei jedem Klick im Forum startet die Diashow also mit dem selben Bild, die letzten wird also niemand zu sehen bekommen, außer er schaut nur zu und macht auf dem Forum nichts, was ja wohl niemand macht.

Jetzt würde ich in das Script gerne eine Zufallsreihenfolge einbauen, jeder Versuch ist aber bisher gescheitert. Vielleicht kann mir ja jemand helfen.

Das Script in Aktion kann man hier sehen http://www.grammiweb.de/javascript/scripte/java370.htm

Des Script sieht so aus

//Breite der Grafiken (in Pixeln)
var trans_width='133px'

 //Hoehe der Grafiken (in Pixeln)
var trans_height='100px'

//Anzeigedauer (1000=1 Sekunde)
var pause=6000

//Animationsgeschwindigkeit, je hoeher, desto schneller
var degree=10

var slideshowcontent=new Array()

// Grafiken und Links
// Syntax: grafik, optionaler Link, optionales Ziel (target)

slideshowcontent[0]=["./bilder/fader/01.jpg", "http://www.meineDomain.de/fotoalbum/displayimage.php?album=2&pos=27", "_new"]
slideshowcontent[1]=["./bilder/fader/02.jpg", "http://www.meineDomain.de/fotoalbum/displayimage.php?album=2&pos=29", "_new"]
slideshowcontent[2]=["./bilder/fader/03.jpg", "", ""]
slideshowcontent[3]=["./bilder/fader/04.jpg", "", ""]
slideshowcontent[4]=["./bilder/fader/05.jpg", "", ""]



// Hintergrundfarbe
var bgcolor='#9CB6CE'

//// Keine weiteren Aenderungen erforderlich /////////////



var imageholder=new Array()
for (i=0;i<slideshowcontent.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideshowcontent[i][0]
}

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>')
}

var curpos=trans_width*(-1)
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function getslidehtml(theslide){
var slidehtml=""
if (theslide[1]!="")
slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'
slidehtml+='<img src="'+theslide[0]+'" border="0">'
if (theslide[1]!="")
slidehtml+='</a>'
return slidehtml
}

function moveslide(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])
nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(getslidehtml(slideshowcontent[curindex]))
crossobj.document.close()
}
curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0
}

function jumptoslide(which){
curindex=which
rotateslide()
}

function resetit(what){
curpos=parseInt(trans_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=getslidehtml(slideshowcontent[curindex])
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (window.addEventListener)
window.addEventListener("load", startit, false)
else if (window.attachEvent)
window.attachEvent("onload", startit)
else if (ie4||dom||document.layers)
window.onload=startit

Die Angabe der anzuzeigenden Bilder wird ja hier

// Grafiken und Links
// Syntax: grafik, optionaler Link, optionales Ziel (target)

slideshowcontent[0]=["./bilder/fader/01.jpg", "http://www.meineDomain.de/fotoalbum/displayimage.php?album=2&pos=27", "_new"]
slideshowcontent[1]=["./bilder/fader/02.jpg", "http://www.meineDomain.de/fotoalbum/displayimage.php?album=2&pos=29", "_new"]
slideshowcontent[2]=["./bilder/fader/03.jpg", "", ""]
slideshowcontent[3]=["./bilder/fader/04.jpg", "", ""]
slideshowcontent[4]=["./bilder/fader/05.jpg", "", ""]

angegeben.
Kann mir jemand einen Tipp geben wie und wo ich da eine zufällige Reihenfolge rein bekommen, oder dass wenigstens die Diashow immer bei einem zufälligen anderen Bild beginnt, gleiche Reihenfolge wäre dann egal.

[Raketenmann]

var curindex=0
var nextindex=1

Wenn die Slideshow bei einem anderen als dem 0. Element beginnen soll, kannst du der Variablen "curindex" einen anderen Startwert als 0 zuweisen.
Die Variable "nextindex" bekommt als Startwert "curindex"+1

Eine Alternative gibt es noch: Du kannst mit der Funktion reverse() das Array "umdrehen" und es somit rückwärts ausgeben.

[ninn]

Wenn ich es richtig sehe fängt dann aber die Diashow auch wieder immer mit dem selben Bild an.
Es soll aber bei jedem Seitenaufruf, also bei jedem Start des Scripts mit einem anderen anfangen.

Ich kann ja schließlich nicht den ganzen Tag das Script umschrieben um ein anderes Startbild anzugeben. Aber als Ansatz den Wert hinter "curindex=" ständig durch einen Zufallsgenerator zu verändern ist schon mal nicht schlecht, nur meine Kenntnisse reichen dafür wohl leider auch nicht aus, werde es aber mal versuchen.

Eine kleine Routine die eine Zufallszahl von 0 bis Anzahl Bilder in eine Variable schreibt und diese dann als Wert hinter "curindex=" einfügen.

Was sagen die Profis würde das funktionieren?

[Raketenmann]

Zitat von ninn

Ich kann ja schließlich nicht den ganzen Tag das Script umschrieben um ein anderes Startbild anzugeben.

Ach so... ;-)

Zitat von ninn

Eine kleine Routine die eine Zufallszahl von 0 bis Anzahl Bilder in eine Variable schreibt und diese dann als Wert hinter "curindex=" einfügen.

Pass nur auf, dass nextindex auch einen gültigen Wert bekommt, sonst erzeugst du bestimmt einen Fehler...

Zufallswerte mit Javascript: http://de.selfhtml.org/javascript/ob...ath.htm#random