HTML 幻灯片放映不正常

Question

我正在 HTML 制作幻灯片，这是我的代码：

var cur = 0;
var max = $('.slides div').length;

var $curSlide;

setInterval(function() {
  $($('.slides div')[cur]).fadeOut(500, function() {
     $($('.slides div')[cur%=max, ++cur]).fadeIn(500);
  });
 
}, 2000);

.slides img {
  max-width: 400px;
  max-height: 300px;
}

.slides div:not(#first) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slides">
  <div id='first'><img src="https://www.tutorialrepublic.com/lib/images/javascript-illustration.png"></div>
  <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png"></div>
  <div><img src="https://cdn-images-1.medium.com/max/1200/1*OFsc0SD55jhi8cjo7aCA4w.jpeg"></div>
</div>

第一次有效但不会重复！！！
它运行放映了一次幻灯片，但不能运行再次放映。这里有什么问题？

Answer 1

啊，comma operator. 经典错误。

在行中：

$($('.slides div')[cur%=max, ++cur]).fadeIn(500);

你先得到余数，然后递增cur，而你应该做的是先递增然后得到余数：

$($('.slides div')[++cur, cur%=max]).fadeIn(500);

这应该可以解决您的问题，试试吧！

HTML 幻灯片放映不正常

HTML slideshow isn't working as it should

html

slideshow