html/javascript slideshow does not work
Question
i want to have a slideshow in my webpage but my code isnt working. here is my html:
<body>
<script type="text/javascript">
var slideNumber = 1;
function slide() {
document.getElementById("slideshow").src = "../images/slideshow/" + slideNumber + ".jpg";
slideNumber++;
if (slideNumber == 5) {
slideNumber = 1;
}
setTimeout("slide()",2500);
}
slide();
</script>
<img id="slideshow" src="../images/slideshow/1.jpg" width="500" height="300"/>
</body>
Why doesn't it work as expected?
3 answers
solution1
3 ACCPTED 2015-08-25 15:54:22
Working Fiddle: https://jsfiddle.net/uff8nydv/
var slideNumber = 1;
function slide() {
document.getElementById("slideshow").src = "../images/slideshow/" + slideNumber + ".jpg";
console.log("../images/slideshow/" + slideNumber + ".jpg");
slideNumber++;
if (slideNumber == 5) {
slideNumber = 1;
}
setTimeout(slide,500);
}
slide();
Also make sure you identifiy <img> as id="slideshow"
<body>
<img src="../images/slideshow/1.jpg" width="500" height="300" id="slideshow"/>
</body>
solution2
0 2015-08-25 15:47:58
The setTimeout calls a function slideit() that doesn't exist in your code. Chaning it to slide() might work better.
Also, the eval is unnecessary, and the script chokes because you're trying to access an element #slideshow via getElementById("slideshow") that doesn't exist in your code.
Edited: fixed it...
<body>
<img id="slideshow" src="../images/slideshow/1.jpg" width="500" height="300"/>
<script type="text/javascript">
var slideNumber = 1;
function slide() {
document.getElementById("slideshow").src = "../images/slideshow/" + slideNumber + ".jpg";
slideNumber++;
if (slideNumber == 5) {
slideNumber = 1;
}
setTimeout("slide()",1000);
}
slide();
</script>
</body>
solution3
0 2015-08-25 15:56:17
You have to add the id="slideshow" to
img src="../images/slideshow/1.jpg" id="slideshow" width="500" height="300"
in order to change the image.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.