Javascript 滑动数组元素

Question

实际上 next() 和 previous() 按钮没有正常工作，这意味着如果第二个元素由 next 按钮显示，那么在单击 previous 按钮后必须显示第一个元素，但它从末尾开始. 另一个问题是，在使用 setTimeout() 函数后，当我单击下一步时，它会加快计时器的速度，因为它应该具有相同的自动播放速度。

var newsArr = ["my name is nouman", "i live in abbottabad", "the breaking news about Pakistan"];
var i = 1;
var x = document.getElementById("demo");

function next() {
  if (i < newsArr.length) {
    x.innerHTML = newsArr[i];
    i++;
  } else {
    i = 0;
    x.innerHTML = newsArr[i];
  }
  setTimeout(next, 2000);
}

function prev() {
  if (i >= 0) {
    x.innerHTML = newsArr[i];
    i--;
  } else {
    i = newsArr.length - 1;
    x.innerHTML = newsArr[i];
  }
}

<div class="newsslider">
  <p class="text" id="demo">my name is nouman </p>
  <button class="btn1" type="button" class="prev" onclick="prev()">PREV</button>
  <button class="btn2" type="button" class="next" onclick="next()">NEXT</button>
</div>

Answer 1

据我所知你想要什么：

每次调用下一个函数都会有一个新的超时开始。意味着如果你点击下一步 3 次。您将同时有 3 次超时运行。这就是你看到它加速的方式。

解决方法是先清除运行 timeout再设置新的。这样你将永远最多有一个超时运行.

此外，您可能想先更新索引，然后在无效时进行调整。否则你可能会遇到 i > arr.length.

的奇怪情况

var newsArr = [
  "my name is nouman",
  "i live in abbottabad",
  "the breaking news about Pakistan",
];
var i = 0;
var x = document.getElementById("demo");
var timeoutId;
function next() {
  if (timeoutId) {
    clearTimeout(timeoutId);
  }
  i++;
  if (i < newsArr.length) {
    x.innerHTML = newsArr[i];
  } else {
    i = 0;
    x.innerHTML = newsArr[i];
  }
  timeoutId = setTimeout(next, 2000);
}

function prev() {
  i--;
  if (i >= 0) {
    x.innerHTML = newsArr[i];
  } else {
    i = newsArr.length - 1;
    x.innerHTML = newsArr[i];
  }
}

<div class="newsslider">
  <p class="text" id="demo">my name is nouman </p>
  <button class="btn1" type="button" class="prev" onclick="prev()">PREV</button>
  <button class="btn2" type="button" class="next" onclick="next()">NEXT</button>
</div>

Javascript 滑动数组元素

Javascript slider through array elements

html

javascript

slider