Bilder bei jquery/JavaScript nach bestimmter zeit austauschen?
Erstmal entschuldigung für die komische Überschrift, ich schmeiße manchmal die beiden gerne durcheinander.
Ich hab auf meiner Seite einen Timer (fürs Beispiel 30s), der mit einem Button gestartet werden. Am Anfang soll Bild1 stehen. Nachdem der Timer bei der Hälfte der Zeit angekommen ist (hier 15s) soll Bild2 dort erscheinen wo Bild1 vorher war. Ist der Timer bei 0 angekommen, wird man auf eine andere Seite weitergeleitet.
Wie mache ich das am besten?
Hier mein bisheriger Code
$(document).ready(function (e) {
var $timer = $("#timer");
var stop = false;
var timerLoop;
$( "#button_start" ).click(function() {
timerLoop = setInterval(function(){ update() }, 1000);
});
function update() {
if(!stop){
var myTime = $timer.html();
var ss = myTime.split(":");
var dt = new Date();
dt.setHours(0);
dt.setMinutes(ss[0]);
dt.setSeconds(ss[1]);
var dt2 = new Date(dt.valueOf() - 1000);
var temp = dt2.toTimeString().split(" ");
var ts = temp[0].split(":");
if(ss[0] === "00" && ss[1] === "01"){
stop = true;
clearInterval(timerLoop);
$("body").load( "./erfolgreich.html" );
}
}
$timer.html(ts[1]+":"+ts[2]);
//setTimeout(update, 1000);
}
});
3 Antworten
Warum einfach, wenn es auch Umständlich geht? ;)
Ganz ohne jquery...
<script>
function start_action()
{ //ändere Bild
setTimeout(function(){document.getElementById("myImg").src = "bild2.jpg"}, 3000);
//Wechsle zu neuer Seite
setTimeout(function(){location.replace("https://www.w3schools.com")}, 6000);
}
</script>
<body>
<img id="myImg" src="bild1.jpg" alt="Smiley face" width="100px" height="auto"><br>
<BUTTON onclick="start_action()">run</BUTTON>
</body>
ich habe mal zur Demonstration kürzere Zeiten gewählt.
Beide Timeouttimer laufen unabhängig voneinander, so kannst Du die Zeiten für die Aktionen wählen wie Du möchtest, ohne irgendwelche Zählerei.
Einfach sagen was wann passieren soll, und es geschieht dann auch.
Bild ändern: https://www.w3schools.com/jsref/prop_img_src.asp
Timeout: https://www.w3schools.com/jsref/met_win_settimeout.asp
Seite wechseln:https://www.w3schools.com/jsref/met_loc_replace.asp
Snook hat da etwas ganz gutes "gebastelt".
Im HTML Code machst du ein <DIV> und wirfst dort alle Bilder mit einem <IMG> Tag rein:
<div class="fadein">
<img src="DeinBild1.jpg">
<img src="DeinBild2.jpg">
<img src="DeinBild13.jpg">
</div>
Das CSS sieht so aus:
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
Dann musst du nur noch dieses Javascript erstellen:
function bntCLICK() {
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');},
30000);
};
Und schon hast du eine simple Slideshow.
Um diese mit dem Button zu starten:
<input id="clickMe" type="button" value="clickme" onclick="btnCLICK();" />
...weil jqery etwas Fremdes ist? (etwa wie ein Holzbein) Ich bin zwar nicht paranoid, aber wenn mal jemand auf die Idee kommt die jqueryserver abzuschießen sind all die hübschen jqery belasteten Seiten nur noch Müll.
Außerdem sieht jqery-Code irgendwie unästhetisch aus.
Ganz früher als ich anfing zu programmieren sagte mir mal ein alter Pascalprogrammierer, man sieht schon an der Optik ob Code etwas taugt ohne auch nur eine Zeile gelesen zu haben. Das muss so symmetrisch sein wie ein Gedicht.
jqery sieht für mich immer aus wie ein Katzenklo , irgendwie zusammen gescharrt und keiner weiß mehr was unter der Oberfläche lauert...
Wenn ich etwas schreibe egal ob in Pascal , Batch, Javascript oder einer anderen Sprache kann ich jedem Schritt für Schritt erklären was welche Anweisung tut. Da jquery in Javascript geschrieben ist gibt es nichts was sich nicht auch ohne diesen Umweg regeln ließe.
Die wenigsten Leute, welche jqery einbauen, wissen was der Code tut... google was Du brauchst und dann Copy und Paste... und wenn es nicht so richtig läuft schmeiße den Helfern bei Stackoverflow , Superuser oder auch hier den Kram mit einer grammatisch einigermaßen unverständlichen Fragestellung vor die Füße .
Du kannst die IMG src anpassen.
$('#img').attr('src', 'AndereURL');
Oder du lädst alle Bilder vor und passt dann "visible" an.
$('#img1').hide();
$('#img2').show();
Snook braucht jedoch fremde Bibliotheken: jQwery... mal wieder
Erzesel macht das ganz einfach mit Köpfchen und ganz normalem Javascript,
kann sogar Bilder unterschiedlicher Größe ohne Verzerrung handeln.
...während Snook wohl auf gleiche Bildgröße achten muss...
meine Variante : (sieht nur etwas mehr aus weil ich die Kommentare drin habe und die Bilder anpasse)