Guten Tag Community,
ich bin auf der Suche nach einem Code"schnipsel", der es mir ermöglicht einen Bildwechsel mit einem Timer durchzuführen & das unabhängig davon, ob die Seite neugeladen wird.
Beim Neuladen würde der Code von sagen wir vorne anfangen & würde sich wieder das erste Bild nehmen dieses Problem könnte man mit Cookies lösen aber eben der Rest, bin gerade überfragt.
Ich wäre jedem dankbar, der mir eine gute, relevante Antwort/Lösung geben könnte.
---
Mit freundlichen Grüßen,
PS: da es optisch gut aussieht habe ich hier etwas mit dem Fadeeffekt ausprobiert, funktionieren tuht es allerdings nicht.
<script type="text/javascript" language="JavaScript">
function swap(Bildname,BildURL){
document.images[Bildname].src = BildURL;
}
window.setTimeout("swap(fade('imageBox') && 'bild1','bild2.jpg')", 2500);
</script>
Alles anzeigen
<script type="text/javascript" language="JavaScript">
var TimeToFade = 1000.0;
function fade(eid)
{
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}
if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}
function animateFade(lastTick, eid)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
}
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
</script>
Alles anzeigen
<div id="imageBox">
<img name="bild1" src="bild1.jpg" width="200" height="50" border="1"></img>
</div>
Wie man im ersten Codeabschnitt sieht, habe ich schon versucht den Fadeeffekt einzubauen. Dies bewirkt nun das, dass erste Bild zwar
verschwindet (mit dem Fadeeffekt), aber das andere Bild nicht wieder erscheint.