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

Question

当我单击按钮“Right/Next”时，我的 DIV 幻灯片显示 空白页 最后一张幻灯片。
当我在 幻灯片 1、幻灯片 2 上单击 "Next" 时没有问题
有时，当我在某些幻灯片上单击按钮 "Left/Previous" 时，它无法转到上一张幻灯片
我认为我的代码是错了我要改正，

1) Autoplay Slideshow,

2) Can Control button "Next/Pre" correctly.

如果我不点击幻灯片上的任何按钮，autoplay/loop 对我来说播放效果很好
谢谢

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 return 你必须保留它的处理程序对象，并且在使用 $('.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 in 时，它会移动到 slide3 ，但你希望它是 2 ！这是因为当 slideStart 运行你加上 ++current 它的意思是它现在的值是 1 并且当你点击右键时你 current + 1 turn此值为 2（第 3 张幻灯片），因此要解决此问题，您必须这样做：

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

同slideLeft()

第 3 个滑块有问题：

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

please calculate things in one place not in 2 function to no any confusing . if your are do first codes.

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%;
}

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

(somewhere i remove some repeat lines and replace with functions that made for it (what is use functionality if didn't use of it for this sections? ) )

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>

对不起我的英语不好:)

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

Autoplay Slideshow blank slide when I click next/previous on last slide

javascript

slideshow