当我在最后一张幻灯片上单击下一张/上一张时自动播放幻灯片空白幻灯片

Question

当我点击最后一张幻灯片上的“右/下一步”按钮时，我的 DIV 幻灯片显示了一个空白页。
当我在 幻灯片 1、幻灯片 2 上并单击“下一步”时没有问题
有时，当我在某些幻灯片上单击按钮 “左/上” 时，它无法转到上一张幻灯片
我想我的代码是 错误 我想要让它正确，

1) 自动播放幻灯片，

2) 可以正确控制“Next/Pre”按钮。

如果我不点击幻灯片上的任何按钮，自动播放/循环播放对我来说很好
谢谢

var sliderImages = document.querySelectorAll('.container-slide')
var arrowLeft = document.querySelector('#arrow-left')
var arrowRight = document.querySelector('#arrow-right'),
  current = 0;


// Clear all images
function reset() {
  for (var i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Init slider
function startSlide(n) {

  if (n == undefined) {
    n = ++current;
  }
  if (n > sliderImages.length) {
    current = 1;
  }
  if (n < 1) {
    current = sliderImages.length;
  }
  for (i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }



  sliderImages[current - 1].style.display = "block";
  setTimeout(startSlide, 3000);

}


// Show prev
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;

}

// Left arrow click
arrowLeft.addEventListener("click", function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

/* Text On Slide */

.text-on-slide {
  display: block;
  width: 100%;
  height: auto;
  background: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tile-header {
  font-family: Helvetica;
  font-weight: bold;
  font-size: 8vh;
  color: white;
  display: block;
  position: relative;
  text-align: center;
}


/* Slide */

.main-container-slidershow {
  width: 100%;
  height: 70vh;
  background: none;
  border: 0px solid black;
  text-align: center;
  position: relative;
  display: block;
  overflow: hidden;
}

.slideshow {
  width: 100%;
  height: 70vh;
  background: none;
  overflow: hidden;
  border: #000 0px solid;
  display: block;
}

.container-slide {
  height: 100%;
  background-size: cover;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  display: block;
}

.container-slide1 {
  background: pink;
}

.container-slide2 {
  background: blue;
}

.container-slide3 {
  background: green;
}

.container-slide1,
.container-slide2,
.container-slide3 {
  height: 100%;
  background-size: cover;
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  display: block;
}

.arrow {
  border: solid white;
  display: inline-block;
  padding: 35px 35px;
  position: absolute;
  top: 45%;
  cursor: pointer;
}

.left-arrow {
  left: 5%;
  transform: rotate(-45deg);
  border-width: 1px 0px 0px 1px;
}

.right-arrow {
  right: 5%;
  transform: rotate(-45deg);
  border-width: 0px 1px 1px 0px;
}

<div class="main-container-slidershow">
  <div class="slideshow">

    <div class="container-slide container-slide1">
      <div class="text-on-slide">
        <a class="tile-header">Slide1</a>

      </div>
    </div>

    <div class="container-slide container-slide2">
      <div class="text-on-slide">
        <a class="tile-header">Slide2</a>
      </div>
    </div>

    <div class="container-slide container-slide3">
      <div class="text-on-slide">
        <a class="tile-header">Slide3</a>

      </div>
    </div>


  </div>
  <a id="arrow-right" class="arrow right-arrow"></a>
  <a id="arrow-left" class="arrow left-arrow"></a>
</div>
<br>
<br>

Answer 1

你的问题是错误的时间处理， 在滑块中，当鼠标悬停在滑块上时，此时您必须停止计时器，当鼠标移开时再次启动计时器，此代码使您的幻灯片很漂亮，因为当用户使用向右或向左箭头时，可能是计时器的最后一刻在看下一张幻灯片之前，请更换幻灯片！当您发表评论时，您的代码问题也是如此

//startSlide();

你的滑块很好， 所以你必须做的是， setTimeout 返回一个处理程序对象，你必须保留它，当使用 $('.main-container-slidershow').mouseenter() 和 $('.main-container- slidershow').mouseleave() 像这样处理定时器对象：

$('.main-container-slidershow').mouseenter(function (){
    console.log('enter');
    clearTimeout(timer);
});
$('.main-container-slidershow').mouseleave(function (){
    console.log('out')
    startSlide();
})

并将 startSlide 替换为：

function startSlide(n) {

    if (n == undefined) {
        n = ++current;
    }
    if (n > sliderImages.length) {
        current = 1;
    }
    if (n < 1) {
        current = sliderImages.length;
    }
    reset();

    sliderImages[current - 1].style.display = "block";
    timer = setTimeout(startSlide, 3000);

}

现在让我们看看你的上一张幻灯片有什么问题： - 当您首先单击 rigth 时，它会移动到 slide3 ，但您希望它是 2 ！这是因为当 slideStart 运行时你加上 ++current 它的意思是它的值现在是 1 并且当你点击右时你 current + 1 把这个值变成 2 (第三张幻灯片) ，所以要解决这个问题，您必须这样做：

function slideRight() {
    reset();
    sliderImages[current].style.display = "block";
    current ++;
}

与 slideLeft ()

相同

第三个滑块的问题：

arrowRight.addEventListener("click", function() {
    if (current === sliderImages.length) {
        current = 0;
    }
    slideRight();
});

请在一个地方而不是在 2 个函数中进行计算 令人困惑。如果你是第一个代码。

ps：第一次加载时会有一点变化：

.container-slide1 {
    display: block;
    background: pink;
}

.container-slide2 {
    background: blue;
    display: none;
}

.container-slide3 {
    background: green;
    display: none;
}

.container-slide1,
.container-slide2,
.container-slide3 {
    height: 100%;
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
}

所以我用较少的更改更改你的代码，你可以与你的比较并为你清除

（在某处我删除了一些重复行并替换为为 它（如果在本节中没有使用它，它的使用功能是什么？））

var sliderImages = document.querySelectorAll('.container-slide')
    var arrowLeft = document.querySelector('#arrow-left')
    var arrowRight = document.querySelector('#arrow-right'),
            current = 0;

    // Clear all images
    function reset() {
        for (var i = 0; i < sliderImages.length; i++) {
            sliderImages[i].style.display = "none";
        }
    }
    $('.main-container-slidershow').mouseenter(function (){
        clearTimeout(timer);
    });
    $('.main-container-slidershow').mouseleave(function (){
        startSlide();
    })

    // Init slider
    function startSlide(n) {
        timer = setTimeout(function(){
            slideRight();
            startSlide();
        }, 3000);
    }


    // Show prev
    function slideLeft() {
        reset();
        current--;
        if (current < 0)
            current = sliderImages.length-1;
        sliderImages[current].style.display = "block";

    }

    // Show next
    function slideRight() {
        reset();
        current ++;
        if (current >= sliderImages.length)
            current = 0;
        sliderImages[current].style.display = "block";

    }

    // Left arrow click
    arrowLeft.addEventListener("click", function() {
        slideLeft();
    });

    // Right arrow click
    arrowRight.addEventListener("click", function() {
        slideRight();
    });

    startSlide();

  /* Text On Slide */

    .text-on-slide {
        display: block;
        width: 100%;
        height: auto;
        background: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .tile-header {
        font-family: Helvetica;
        font-weight: bold;
        font-size: 8vh;
        color: white;
        display: block;
        position: relative;
        text-align: center;
    }


    /* Slide */

    .main-container-slidershow {
        width: 100%;
        height: 70vh;
        background: none;
        border: 0px solid black;
        text-align: center;
        position: relative;
        display: block;
        overflow: hidden;
    }

    .slideshow {
        width: 100%;
        height: 70vh;
        background: none;
        overflow: hidden;
        border: #000 0px solid;
        display: block;
    }

    .container-slide {
        height: 100%;
        background-size: cover;
        background-attachment: scroll;
        background-repeat: no-repeat;
        background-position: center center;
        width: 100%;
        display: block;
    }

.container-slide1 {
    display: block;
    background: pink;
}

.container-slide2 {
    background: blue;
    display: none;
}

.container-slide3 {
    background: green;
    display: none;
}

.container-slide1,
.container-slide2,
.container-slide3 {
    height: 100%;
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
}

    .arrow {
        border: solid white;
        display: inline-block;
        padding: 35px 35px;
        position: absolute;
        top: 45%;
        cursor: pointer;
    }

    .left-arrow {
        left: 5%;
        transform: rotate(-45deg);
        border-width: 1px 0px 0px 1px;
    }

    .right-arrow {
        right: 5%;
        transform: rotate(-45deg);
        border-width: 0px 1px 1px 0px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container-slidershow">
  <div class="slideshow">

    <div class="container-slide container-slide1">
      <div class="text-on-slide">
        <a class="tile-header">Slide1</a>

      </div>
    </div>

    <div class="container-slide container-slide2">
      <div class="text-on-slide">
        <a class="tile-header">Slide2</a>
      </div>
    </div>

    <div class="container-slide container-slide3">
      <div class="text-on-slide">
        <a class="tile-header">Slide3</a>

      </div>
    </div>


  </div>
  <a id="arrow-right" class="arrow right-arrow"></a>
  <a id="arrow-left" class="arrow left-arrow"></a>
</div>
<br>
<br>

对不起我的英语不好:)