Ich habe eine Seite, wo ich 3 Bilder haben, untereinander, und ich brauche sie alle 10 Sekunden (zum Beispiel ändern: Bilder 1-3 werden angezeigt, nachdem 10 Sekunden werden Bilder 4-6 angezeigt, nach 10 Sekunden werden Bilder 7-9 angezeigt, ..., Bilder 1-3 werden angezeigt.Bild ändern in HTML-Seite alle paar Sekunden mit Javascript
Für jetzt habe ich einen Code, der nur die erste von den 3 Bildern ändert. Wie könnte ich es so machen, dass es nur alle 3 Bilder auf einmal ändert, nach jeweils 10 Sekunden?
Hier ist ein Javascript-Beispiel:
<script>
var links = ["http://www.example.com","http://www.def.com","http://www.ghi.com"];
var images = ["http://www.example.com/img1.png", "http://www.example.com/img2.png",
"http://www.example.com/img3.png", "http://www.example.com/img4.png",
"http://www.example.com/img5.png", "http://www.example.com/img6.png"
];
var i = 0;
var renew = setInterval(function(){
if(links.length == i){
i = 0;
}
else {
document.getElementById("bannerImage").src = images[i];
document.getElementById("bannerLink").href = links[i];
i+=1;
}
},10000);
</script>
HTML-Code:
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.example.com/img1.png" width="694" height="83" alt="some text">
</a>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.example.com/img2.png" width="694" height="83" alt="some text">
</a>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="http://www.example.com/img3.png" width="694" height="83" alt="some text">
</a>
----------------------- -------------------------------------------------- -------------------------------------------------- --------- BEARBEITEN --------------------------------------- -------------------------------------------------- -------------------------------------------
Bitte sehen Sie sich den folgenden Code an. Ich so etwas wie dieses brauchen:
<head>
<title>Test</title>
<script>
var links = ["http://www.example.com","http://www.example.com","http://www.example.com"];
var images = [ "https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/2/29/Example_image_not_be_used_in_article_namespace.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/9/90/Contoh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg"
];
var i = 0;
var renew = setInterval(function(){
if(links.length == i){
i = 0;
}
else {
document.getElementById("bannerImage").src = images[i];
document.getElementById("bannerLink").href = links[i];
i+=1;
}
},3000);
</script>
</head>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" alt="some text">
</a></br>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" alt="some text">
</a></br>
<a id="bannerLink" href="http://www.example.com" onclick="void window.open(this.href); return false;">
<img id="bannerImage" src="https://upload.wikimedia.org/wikipedia/commons/2/29/Example_image_not_be_used_in_article_namespace.jpg" alt="some text">
</a></br>
</body>
Mit dem obigen Code, nur die ersten Bildänderungen, die zweite und die dritte sind die gleichen die ganze Zeit, aber ich brauche sie nach sehr 10 Sekunden zu ändern (Ich brauche dasselbe zu tun, was ich mit Bild 1 gemacht habe, mit Bildern 2 und 3).
Mögliche Duplikat [Bild ändern in HTML-Seite alle paar Sekunden] (http://stackoverflow.com/questions/13975891/change-image-in-html-page-every-few-seconds) –
sollte ID eindeutig sein ... – Vuong
Mai werden Sie nur ein Bild (bannerImage) setzen? Wie der obige Code impliziert? –