簡體   English   中英

html / javascript幻燈片不起作用

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM