使用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小提琴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));
  }  
});

请忽略风格

Answer 2

我无法重现您描述的行为。我用你的代码创建了一个小提琴（小提琴id eozpp6vo），画廊似乎按预期工作。