Question

您好我使用HTML和javascript构建了带导航箭头的图像滑块。我需要一个暂停按钮来停止幻灯片放映，因为它每5秒旋转一次图像。

可以帮助我吗？

＆＃13;

<script>

	var index = 1;

	function plusIndex(n){
		index = index + 1;
		showImage(index);
	}

	showImage(1);

	function showImage(n){
		var i;
		var x = document.getElementsByClassName("slides");
		if(n > x.length){ index = 1};
		if(n < 1){ index = x.length};
		for(i=0;i<x.length;i++)
			{
				x[i].style.display = "none";
			}
		x[index-1].style.display = "block";
	}
	autoSlide();
	function autoSlide(){
		var i;
		var x = document.getElementsByClassName("slides");
		for(i=0;i<x.length;i++)
			{
				x[i].style.display = "none";
			}
		if(index > x.length){ index = 1}
		x[index-1].style.display = "block";
		index++;
		setTimeout(autoSlide,5000);
	}

</script>

＆＃13;

<div id="container_slides">
	<img class="slides"src="IMG EXAMPLE"/>
	<img class="slides"src="IMG EXAMPLE"/>
	<img class="slides"src="IMG EXAMPLE"/>
	<img class="slides"src="IMG EXAMPLE"/>
	<img class="slides"src="IMG EXAMPLE"/>

	<button class="btn" onclick="plusIndex(-1)" id="btn1">&#10094;</button>
	<button class="btn" onclick="plusIndex(1)"id="btn2">&#10095;</button>
	
</div>

＆＃13;

此？

Answer 1

现在您可以通过单击暂停和取消暂停。用于检查滑块是否处于暂停状态的附加变量，如果它设置为true，则阻止执行$myArray = array('0' => 'tangerine' , '1' => 'orange' , '2' => 'kiwi', '3' => 'strawberry' , '4' => 'banana', '5' => 'grape', '6' => 'pear' , '7'=> 'apple'); echo "<table border ='2px black solid'>"; for ($x = 0; $x < 8; $x++){ echo "<tr>"; for($y = 0; $y < 10; $y++){ echo "<td>".sort($myArray)[$x][$y]."</td>"; } echo "</tr>"; } echo"</table>";。并且要确保图片在暂停时不会更改，在函数setTimeout和if开头的showImage语句应该会有所帮助。

autoSlide

var index = 1;
var timeout = null;
var paused = false;

function plusIndex(n) {
  index++;
  showImage(index);
}

function stopSlider(event) {
  paused = !paused;
  event.innerHTML = paused ? "Start" : "Stop";
  paused ? clearTimeout(timeout) : timeout = setTimeout(autoSlide, 5000);
}

showImage(1);

function showImage(n) {
  if (paused) return;
  var i;
  var x = document.getElementsByClassName("slides");
  if (n > x.length) {
    index = 1
  };
  if (n < 1) {
    index = x.length
  };
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[index - 1].style.display = "block";
}
autoSlide();

function autoSlide() {
  if (paused) return;
  showImage(index);
  index++;
  timeout = setTimeout(autoSlide, 5000);
}

Answer 2

您需要使用clearTimeout()。因此，您将计时器分配给全局变量（因为它需要可以访问交叉功能），然后：

var a = 0; // Global

a = setTimeout(autoSlide, 5000); // Replace this line.

创建一个函数：

function stop() {
  clearTimeout(a);
}

将其添加到按钮：

<button class="btn" onclick="stop();">Stop</button>

完整代码段

＆＃13;

var index = 1;
var a = 0;

function plusIndex(n) {
  index = index + 1;
  showImage(index);
}

showImage(1);

function showImage(n) {
  var i;
  var x = document.getElementsByClassName("slides");
  if (n > x.length) {
    index = 1
  };
  if (n < 1) {
    index = x.length
  };
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[index - 1].style.display = "block";
}
autoSlide();

function autoSlide() {
  var i;
  var x = document.getElementsByClassName("slides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  if (index > x.length) {
    index = 1
  }
  x[index - 1].style.display = "block";
  index++;
  a = setTimeout(autoSlide, 5000);
}

function stop() {
  clearTimeout(a);
}

＆＃13;

<div id="container_slides">
  <img class="slides" src="//placehold.it/100?text=1" />
  <img class="slides" src="//placehold.it/100?text=2" />
  <img class="slides" src="//placehold.it/100?text=3" />
  <img class="slides" src="//placehold.it/100?text=4" />
  <img class="slides" src="//placehold.it/100?text=5" />

  <button class="btn" onclick="plusIndex(-1)" id="btn1">&#10094;</button>
  <button class="btn" onclick="plusIndex(1)" id="btn2">&#10095;</button>
  <button class="btn" onclick="stop();">Stop</button>
</div>

＆＃13;

演示：http://output.jsbin.com/guyanifogu

暂停javascript图像滑块

2 个答案: