时间戳

首页 > 解决方案 > HTML 幻灯片无法正常工作

html - HTML 幻灯片无法正常工作

问题描述

我用 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>

它第一次工作，但它不会重复！
它通过幻灯片运行一次，但不能再次运行。这里有什么问题？

标签： htmlslideshow

解决方案

啊，逗号运算符。经典错误。

在行中：

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

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

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

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

推荐阅读