[英]html/javascript slideshow does not work
我想在網頁中放映幻燈片,但是我的代碼無法正常工作。 這是我的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>
為什么它不能按預期工作?
工作小提琴: 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();
還要確保將<img>
標識為id="slideshow"
<body>
<img src="../images/slideshow/1.jpg" width="500" height="300" id="slideshow"/>
</body>
setTimeout
調用您的代碼中不存在的函數slideit()
。 將其更改為slide()
可能會更好。
另外, eval
是不必要的,腳本會阻塞,因為您試圖通過代碼中不存在的getElementById("slideshow")
訪問元素#slideshow
。
編輯:修復...
<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>
您必須將id =“ slideshow”添加到
img src="../images/slideshow/1.jpg" id="slideshow" width="500" height="300"
為了改變形象。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.