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>

＆＃34; swapImage不是一个函数＆＃34; 我面临的错误是在它显示数组的第一个元素之后发生的。如何使内容滑块逐个显示所有内容？

Answer 1

应在滑块类本身上定义路径和索引属性。目前，每次调用函数时都会初始化列表！

setTimeout方法还需要一个函数作为参数。在您的情况下，setInterval方法更适合。 'setInterval' vs 'setTimeout'

为什么你有＆＃34; swapImage不是一个函数＆＃34;错误？这是因为您引用了一个名为＆＃34; swapImage＆＃34;的全局函数，但是您在滑块类上定义了该方法，因此您必须使用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);
}

滑块仅显示第一个内容元素

1 个答案: