Question

我正在尝试自动制作手动幻灯片

这是我到目前为止的代码

<script>

var slideIndex = 1;
showDivs(slideIndex);


function plusDivs(n) {
showDivs(slideIndex += n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
 x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
setTimeout(showDivs, 6000);
}
</script>

HTML：

<div class="section-split one-third" id="copy-here">
<h3 style="margin-bottom: 0px;">Elsham News</h3>
<div>
<button class="arrows" id="arrow-left" onclick="plusDivs(-1)">❮</button>
<button class="arrows" id="arrow-right" onclick="plusDivs(1)">❯</button>
</div>

  <div class="mySlides">
    1
  </div>

  <div class="mySlides">
   2
  </div>

  <div class="mySlides">
   3
  </div>

  <div class="mySlides">
   4
  </div>

  </div>

我想让滑块自动生成以及保留控件以手动切换幻灯片

我试过setTimeOut但没有运气

Answer 1

要使其自动化，您必须使用setInterval而不是setTimeout。您只需在特定时间间隔内调用plusDivs功能即可自动滑动。

＆＃13;

var slideIndex = 1;
showDivs(slideIndex);


function plusDivs(n) {
showDivs(slideIndex += n);
}

function showDivs(n) {	
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1;}
if (n < 1) {slideIndex = x.length;}
for (i = 0; i < x.length; i++) {
 x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
setInterval(plusDivs.bind(null, 1), 1000);

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="section-split one-third" id="copy-here">
<h3 style="margin-bottom: 0px;">Elsham News</h3>
<div>
<button class="arrows" id="arrow-left" onclick="plusDivs(-1)">❮</button>
<button class="arrows" id="arrow-right" onclick="plusDivs(1)">❯</button>
</div>

  <div class="mySlides">
    1
  </div>

  <div class="mySlides">
   2
  </div>

  <div class="mySlides">
   3
  </div>

  <div class="mySlides">
   4
  </div>

  </div>
</body>
</html>

＆＃13;

自动进行手动幻灯片放映

1 个答案: