Slideshow-Script mit Zeitänderung und Zufallsmodus – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Slideshow-Script mit Zeitänderung und Zufallsmodus Tue, 24 May 05 07:40:11 Z https://forum.selfhtml.org/self/2005/may/24/slideshow-script-mit-zeitaenderung-und-zufallsmodus/812256#m812256 https://forum.selfhtml.org/self/2005/may/24/slideshow-script-mit-zeitaenderung-und-zufallsmodus/812256#m812256 <p>Hallo!<br> Einfach gesagt geht es um eine einfache Sache, aber ich bekomme sie nicht hin. Ich bin in Java Script eben kein Fuchs, sondern nur Skripteverwerter, aber auch nach umfangreichem Probieren hat es nicht klappt. Was nicht geklappt hat? Hier:<br> Ich habe folgendes Slideshow-Script und finde es auch ganz nett:</p> <p>---------------------------------------------------------------------<html></p> <p><head><br> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><br> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"><br> <meta name="ProgId" content="FrontPage.Editor.Document"><br> <title>SLIDESHOW</title><br> <link rel=stylesheet type="text/css" href="slideshow.css"></p> <p></head></p> <p><body><br> <p align="center"><input type="button" id="btnPrev" value="<< VORHERIGES" onclick="Prev();"> <input type="button" id="bntPlay" value="START - STOP" onclick="Play()"> <input type="button" id="btnNext" value=" NÄCHSTES >> " onclick="Next();"></p></p> <p><p align="center"><img id="_Ath_Slide" onload="OnImgLoad()"> </p></p> <p><p align="center"><b><font size="1" face="Verdana">Foto:</b> <SPAN id="_Ath_FileName"> </SPAN> <br><br> Bild Nr.: <SPAN id="_Ath_Img_X"></SPAN> von <SPAN id="_Ath_Img_N"></SPAN></p></p> <p><p align="center"></p> <p><script language="JavaScript1.2"></p> <p>/*<br> Interactive Image slideshow with text description<br> By Christian Carlessi Salvadó (cocolinks@c.net.gt). Keep this notice intact.<br> Visit http://www.dynamicdrive.com for script<br> */</p> <p>g_fPlayMode = 0;<br> g_iimg = -1;<br> g_imax = 0;<br> g_ImageTable = new Array();</p> <p>function ChangeImage(fFwd)<br> {<br> if (fFwd)<br> {<br> if (++g_iimg==g_imax)<br> g_iimg=0;<br> }<br> else<br> {<br> if (g_iimg==0)<br> g_iimg=g_imax;<br> g_iimg--;<br> }<br> Update();<br> }</p> <p>function getobject(obj){<br> if (document.getElementById)<br> return document.getElementById(obj)<br> else if (document.all)<br> return document.all[obj]<br> }</p> <p>function Update(){<br> getobject("_Ath_Slide").src = g_ImageTable[g_iimg][0];<br> getobject("_Ath_FileName").innerHTML = g_ImageTable[g_iimg][1];<br> getobject("_Ath_Img_X").innerHTML = g_iimg + 1;<br> getobject("_Ath_Img_N").innerHTML = g_imax;<br> }</p> <p>function Play()<br> {<br> g_fPlayMode = !g_fPlayMode;<br> if (g_fPlayMode)<br> {<br> getobject("btnPrev").disabled = getobject("btnNext").disabled = true;<br> Next();<br> }<br> else<br> {<br> getobject("btnPrev").disabled = getobject("btnNext").disabled = false;</p> <p>}<br> }<br> function OnImgLoad()<br> {<br> if (g_fPlayMode)<br> window.setTimeout("Tick()", g_dwTimeOutSec*1000);<br> }<br> function Tick()<br> {<br> if (g_fPlayMode)<br> Next();<br> }<br> function Prev()<br> {<br> ChangeImage(false);<br> }<br> function Next()<br> {<br> ChangeImage(true);<br> }</p> <p>////configure below variables/////////////////////////////</p> <p>//configure the below images and description to your own.<br> g_ImageTable[g_imax++] = new Array ("image2.jpg", "Bild 1");<br> g_ImageTable[g_imax++] = new Array ("image3.jpg", "Bild 2");<br> g_ImageTable[g_imax++] = new Array ("image4.jpg", "Bild 3");<br> g_ImageTable[g_imax++] = new Array ("image5.jpg", "Bild 4");<br> g_ImageTable[g_imax++] = new Array ("image6.jpg", "Bild 5");<br> g_ImageTable[g_imax++] = new Array ("image7.jpg", "Bild 6");<br> g_ImageTable[g_imax++] = new Array ("image20.gif", "Bild 7");<br> g_ImageTable[g_imax++] = new Array ("image8.jpg", "Bild 8");<br> g_ImageTable[g_imax++] = new Array ("image9.jpg", "Bild 9");<br> g_ImageTable[g_imax++] = new Array ("image10.jpg", "Bild 10");<br> g_ImageTable[g_imax++] = new Array ("image11.jpg", "Bild 11");<br> g_ImageTable[g_imax++] = new Array ("image12.jpg", "Bild 12");<br> g_ImageTable[g_imax++] = new Array ("image13.jpg", "Bild 13");<br> g_ImageTable[g_imax++] = new Array ("image14.jpg", "Bild 14");<br> g_ImageTable[g_imax++] = new Array ("image1.jpg", "Bild 15");<br> g_ImageTable[g_imax++] = new Array ("image15.jpg", "Bild 16");<br> g_ImageTable[g_imax++] = new Array ("image16.jpg", "Bild 17");<br> g_ImageTable[g_imax++] = new Array ("image17.jpg", "Bild 18");<br> g_ImageTable[g_imax++] = new Array ("image18.jpg", "Bild 19");<br> g_ImageTable[g_imax++] = new Array ("image19.gif", "Bild 20");<br> g_ImageTable[g_imax++] = new Array ("image21.jpg", "Bild 21");<br> g_ImageTable[g_imax++] = new Array ("image22.jpg", "Bild 22");<br> g_ImageTable[g_imax++] = new Array ("image23.jpg", "Bild 23");<br> g_ImageTable[g_imax++] = new Array ("image24.jpg", "Bild 24");<br> g_ImageTable[g_imax++] = new Array ("image25.jpg", "Bild 25");<br> g_ImageTable[g_imax++] = new Array ("image26.jpg", "Bild 26");<br> g_ImageTable[g_imax++] = new Array ("image28.jpg", "Bild 27");<br> g_ImageTable[g_imax++] = new Array ("image29.jpg", "Bild 28");<br> g_ImageTable[g_imax++] = new Array ("image30.jpg", "Bild 29");<br> g_ImageTable[g_imax++] = new Array ("image31.jpg", "Bild 30");<br> g_ImageTable[g_imax++] = new Array ("image32.jpg", "Bild 31");<br> g_ImageTable[g_imax++] = new Array ("image33.jpg", "Bild 32");<br> g_ImageTable[g_imax++] = new Array ("image34.jpg", "Bild 33");<br> g_ImageTable[g_imax++] = new Array ("image27.jpg", "Bild 34");<br> g_ImageTable[g_imax++] = new Array ("image35.jpg", "Bild 35");<br> g_ImageTable[g_imax++] = new Array ("image36.jpg", "Bild 36");<br> g_ImageTable[g_imax++] = new Array ("image37.jpg", "Bild 37");<br> g_ImageTable[g_imax++] = new Array ("image38.jpg", "Bild 38");<br> g_ImageTable[g_imax++] = new Array ("image39.jpg", "Bild 39");<br> g_ImageTable[g_imax++] = new Array ("image40.jpg", "Bild 40");<br> g_ImageTable[g_imax++] = new Array ("image41.jpg", "Bild 41");<br> g_ImageTable[g_imax++] = new Array ("image42.jpg", "Bild 42");<br> g_ImageTable[g_imax++] = new Array ("image43.jpg", "Bild 43");</p> <p>//extend the above list as desired<br> g_dwTimeOutSec=5</p> <p>////End configuration/////////////////////////////</p> <p>if (document.getElementById||document.all)<br> window.onload=Play</p> <p></script><br> </p></p> <p></body></p> <p></html><br> ---------------------------------------------------------------------<br> Dass die Bilder nicht von 1 bis 43 durchnummeriert sind, sondern leicht durcheinander sind, soll nicht weiter stören. Jedenfalls möchte ich, weil ich es woanders gesehen habe und ich es geil finde, einen "Zeitmodus" einbauen. Also ich will per Drop-Down entscheiden können, in welcher zeitlichen Differenz die Bilder jetzt wechseln.<br> Das ich dabei diese Zeile</p> <p>---------------------------------------------------------------------<br> //extend the above list as desired<br> g_dwTimeOutSec=5<br> ---------------------------------------------------------------------</p> <p>bearbeiten muss, ist mir klar, und auch das Drop-Down-Menu ist mir soweit klar...</p> <p>---------------------------------------------------------------------<br> <form name="slideshow" action="slideshow" method="post"><br> <input type="hidden" name="XXXXX" value="XXXX"><br> <input type="hidden" name="XXXXX" value="4"><br> <select name="delay"><br> <option value="0">aus</option><br> <option value="2">2 sekunden</option><br> <option value="5">5 sekunden</<br> option><br> <option value="10">10 sekunden</<br> option><br> <option value="15">15 sekunden</<br> option><br> <option value="20">20 sekunden</<br> option><br> <option value="25">25 sekunden</<br> option><br> <option value="30">30 sekunden</<br> option><br> </select><br><br> <input type="submit" value="&auml;ndern"><br><br><br> <input type="button" value="schliessen" onClick="window.close();"><br> </form><br> --------------------------------------------------------------------</p> <p>So, und wie bring ich das vernünftig zusammen??</p> <p>Wo wir schon dabei sind: Kann mir jemand sagen, wie ich die Bilder zusätzlich in einem "Random-Modus" anzeigen lassen kann? Also ein zusätzlicher Knopf zum Start-Stop-Modus, der Start-Stop-Zufallsmodus beinhaltet?</p> <p>Vielen vielen Dank schon einmal und Gruß!!</p> Slideshow-Script mit Zeitänderung und Zufallsmodus Tue, 24 May 05 08:12:47 Z https://forum.selfhtml.org/self/2005/may/24/slideshow-script-mit-zeitaenderung-und-zufallsmodus/812257#m812257 https://forum.selfhtml.org/self/2005/may/24/slideshow-script-mit-zeitaenderung-und-zufallsmodus/812257#m812257 <p>hi,</p> <blockquote> <p>Jedenfalls möchte ich, weil ich es woanders gesehen habe und ich es geil finde, einen "Zeitmodus" einbauen. Also ich will per Drop-Down entscheiden können, in welcher zeitlichen Differenz die Bilder jetzt wechseln.<br> Das ich dabei diese Zeile<br> //extend the above list as desired<br> g_dwTimeOutSec=5<br> bearbeiten muss, ist mir klar, und auch das Drop-Down-Menu ist mir soweit klar...</p> </blockquote> <p>was fehlt dann noch?<br> auslesen des im dropdown ausgewählten wertes - <a href="http://de.selfhtml.org/javascript/objekte/options.htm" rel="nofollow noopener noreferrer">http://de.selfhtml.org/javascript/objekte/options.htm</a><br> vermutlich für diesen falle am besten mit onChange kombinierbar, um auf eine änderung sofort zu reagieren.</p> <blockquote> <p>Wo wir schon dabei sind: Kann mir jemand sagen, wie ich die Bilder zusätzlich in einem "Random-Modus" anzeigen lassen kann? Also ein zusätzlicher Knopf zum Start-Stop-Modus, der Start-Stop-Zufallsmodus beinhaltet?</p> </blockquote> <p>nur irgendein bild als nächstes auszuwählen, statt stur dem nächsten, sollte keine allzu große kunst sein - Math.random hilft weiter.</p> <p>wenn es aber so sein soll, dass ausgeschlossen ist das ein bild vielleicht mal doppelt kommt, bevor alle durch sind - dann wird's etwas aufwendiger.<br> da lohnt dann ein blick in threads wie bspw. diesen zum thema <a href="http://forum.de.selfhtml.org/archiv/2005/2/t101377/" rel="nofollow noopener noreferrer">Lottozahlen</a>.</p> <p>gruß,<br> wahsaga</p> <div class="signature">-- <br> /voodoo.css:<br> #GeorgeWBush { position:absolute; bottom:-6ft; } </div>