滑塊只顯示第一個內容元素

Question

<button onclick="slider1.swapImage()">Function</button> 

<p id="slide" width="400"></p> 

<script language="JavaScript"> 

    var slider =function(){} 

    slider.prototype.swapImage=function() 
    { 
    var path = new Array(); 
    var i = 0; 

    // Array of Content 

    path[0] = "hello"; 
    path[1] = "hello1"; 
    path[2] = "hello2"; 

    document.getElementById("slide").innerHTML = path[i]; 

    if(i < path.length - 1) i++; 
    else i = 0; 

    setTimeout("swapImage()",2500); 
    }; 

    var slider1 = new slider; 

</script> 

「swapImage是不是一個函數」 是我面對錯誤並已顯示array.How的第一個元素後使內容滑塊顯示這一切正在發生的事情一個一個的內容？

Answer 1

應該在滑塊類本身上定義路徑和索引屬性。目前，每次調用函數時都會初始化列表！

setTimeout方法也需要一個函數作爲參數。 在你的情況下，setInterval方法更好。 'setInterval' vs 'setTimeout'

爲什麼你有「swapImage不是函數」錯誤？這是因爲您引用了一個名爲「swapImage」的全局函數，但是您在slider類中定義了該方法，因此您必須使用this關鍵字。 我想你錯過了一些關於面向對象編程的基礎知識。這是一個很好的起點：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

我重構代碼：https://jsfiddle.net/9hh9v28x/12/

HTML

<button onclick="start()">start</button> 
<p id="slide" width="400"></p> 

的Javascript

// Class Definition 
var Slider = function() { 
     // Array of Content 
     this.path = ["hello1", "hello2", "hello3"]; 
    this.currentIndex = 0; 
}; 

Slider.prototype.nextSlide = function() { 
    // set text 
    document.getElementById("slide").innerHTML = this.path[this.currentIndex]; 

    // count up index and set it back to 0 when the end of the "path" array is reached 
    this.currentIndex++; 
    if(this.currentIndex >= this.path.length){ 
    this.currentIndex = 0; 
    } 
}; 

// 
function start() { 
    var slider1 = new Slider(); 

    // call method on start 
    // otherwise you have to wait 2.5 secs to see something (wenn the setInterval() triggers) 
    slider1.nextSlide(); 

    // The set interval method calls the given function 
    // every given seconds (in this case 2.5) 
    window.setInterval(function(){ 
    slider1.nextSlide(); 
    }, 2500); 
}