Question

我试图让用户点击下一个箭头时立即停止自动滑动。当用户点击下一个滑块时，滑块应停止并进入完全暂停状态。

我将所有滑块代码放入一个名为dontRun的函数中。我最初将它设置为dontRun（1），以便它在加载页面时满足条件和滑块功能。一旦用户点击下一个箭头，我就会转到函数dontRun（0），它应该将自动播放设置为一个缓慢的量，以便它不再自动滑动。

问题是当dontRun（0）工作时，它没有访问自动播放功能，也没有停止滑块。

如何解决这个问题？

function dontRun(value){

if(value === 1) {
var wallopEl = document.querySelector('.Wallop');
var wallop = new Wallop(wallopEl);

// To start Autoplay, just call the function below
// and pass in the number of seconds as interval
// if you want to start autoplay after a while
// you can wrap this in a setTimeout(); function
autoplay(5000);

// This a a helper function to build a simple
// auto-play functionality.
function autoplay(interval) {

  var lastTime = 0;

  function frame(timestamp) {
    var update = timestamp - lastTime >= interval;

    if (update) {
      wallop.next();
      lastTime = timestamp;
    }

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
    };
  }//if

  else if (value === 0){
    alert("This slider should not be auto updating anymore.");
    autoplay(50000000000);

  }
}// end of function


dontRun(1);

$(".Next").click(function(){
dontRun(0);
})

Answer 1

由于其可访问性，无法调用您的自动播放功能。您需要取出该函数并在dontRun方法之前添加。

function autoplay(interval) {
   console.log('called');
};

function dontRun(value){
    autoplay(5000);
    // logic
}

function autoplay(interval) {
  console.log('called');
  var lastTime = 0;

  function frame(timestamp) {
    var update = timestamp - lastTime >= interval;

    if (update) {
      wallop.next();
      lastTime = timestamp;
    }

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
};

function dontRun(value) {

  if (value === 1) {
    var wallopEl = document.querySelector('.Wallop');
    var wallop = new Wallop(wallopEl);

    // To start Autoplay, just call the function below
    // and pass in the number of seconds as interval
    // if you want to start autoplay after a while
    // you can wrap this in a setTimeout(); function
    autoplay(5000);

    // This a a helper function to build a simple
    // auto-play functionality.

  } //if
  else if (value === 0) {
    alert("This slider should not be auto updating anymore.");
    autoplay(50000000000);
  }
} // end of function

//dontRun(0);

function clickMe() {
  console.log('clicked');
  dontRun(0);
}

#btntag {
  width: 100px;
  height: 50px;
}

<button onclick="clickMe()" id="btntag">click</button>

如何使用函数调用停止滑块？

1 个答案: