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

啊，https://docs.djangoproject.com/en/2.1/intro/tutorial01/经典错误。

在此行：

    Row(
        mainAxisAlignment: MainAxisAlignment.values [MainAxisAlignment.start, MainAxisAlignment.start, MainAxisAlignment.end],
        children: <Widget>[
          Container(
            width: 40,
            height: 40,
            child: DecoratedBox(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(40.0)) ,
                  color: Colors.teal,
                  image: DecorationImage(
                    image: AssetImage('assets/fly.jpg'),
                    // ...
                  ),
                  // ...
                )
            ),
          ),
          Column(
            children: <Widget>[
              Text('James Henry', textAlign: TextAlign.left,),
              Row(
                children: <Widget>[
                  Text('status: '),
                  Text('Test Completed')
                ],
              )
            ],
          ),
          Icon(Icons.remove_circle_outline),
        ],
      ),

首先获取余数，然后递增$($('.slides div')[cur%=max, ++cur]).fadeIn(500);，而您应该做的是先递增然后获取余数：

cur

那应该可以解决您的问题，尝试一下！

HTML幻灯片无法正常运行

1 个答案: