javascript - 使用 JavaScript 进行幻灯片故障排除

Question

我正在制作幻灯片，但在使用 javascript 时遇到了一些问题。当我单击右侧时，它工作得很好，然后如果我单击左侧，它也可以工作，但如果我再次单击右侧，它应该只转到下一个图像，但它会跳过它并转到下一个图像。有谁知道解决办法吗？

$('#droite').click(function() {
  if (photo == 4) {} else {
    $('#plateau-gallerie').animate({
      left: (-300 * photo) + 'px'
    }, 500);
    photo++;
  }
});
$('#gauche').click(function() {
  if (photo == 1) {} else {
    $('#plateau-gallerie').animate({
      left: (-300 * (photo - 2)) + 'px'
    }, 500);
    photo--;
  }
});

#gallerie {
  width: 60vw;
  height: 300px;
  background-color: #a9a9a9;
  border-radius: 10px;
  border: 3px solid #999;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

#plateau-gallerie {
  width: 1780px;
  float: left;
  top: 50px;
  position: absolute;
}

#gallerie img {
  height: 200px;
  margin: 0 0px 0 80px;
  float: left;
}

.bouton {
  position: absolute;
  height: 100px;
  width: 60px;
  top: 100px;
  background-color: #444;
  opacity: 0.7;
  cursor: pointer;
  z-index: 99;
  font-size: 3em;
}

.bouton:hover {
  background-color: #222;
}

#gauche{
	left:15px;
}

#droite{
	right:15px;
}

<section id="gallerie">
  <button class="bouton" id="gauche"><</button>
  <section id="plateau-gallerie">
    <img src="img/pc-gallerie.jpg" alt="ordinateur">
    <img src="img/pc-gallerie.jpg" alt="ordinateur">
    <img src="img/pc-gallerie.jpg" alt="ordinateur">
    <img src="img/pc-gallerie.jpg" alt="ordinateur">
    <img src="img/pc-gallerie.jpg" alt="ordinateur">
    <img src="img/pc-gallerie.jpg" alt="ordinateur">
  </section>
  <button class="bouton" id="droite">></button>
</section>

有人知道这是为什么吗？

Answer 1

我已经更改了脚本，更改了左右滑动的逻辑

将图像宽度更改为300px，并居中对齐

#gallerie img {
  height: 200px;
  float: left;
  width:300px;
  text-align: center;
}

这是 js fiddle https://jsfiddle.net/bqg2aheh/

$('#left').click(function() {
  if (!(photo < 0)) {  
   photo--;
    $('#plateau-gallerie').animate({
      left: (-300 * (photo)) + 'px'
    }, 500);
    console.log(photo + '  ' + (-300 * photo));
  }  
});

$('#right').click(function() {

  if (!(photo > 5)) {    
    photo++;
    $('#plateau-gallerie').animate({
      left: (-300 * photo) + 'px'
    }, 500);
    console.log(photo + '  ' + (-300 * photo));
  }  
});

请忽略样式