Question

我创建了一个图像幻灯片，其中包含我在网上找到的Jquery（包括我认为）的首页横幅文字块。除了从空白开始，然后循环遍历图像之外，它均起作用。这是指向预览页面https://www.3-gis.com/click-1-0-1?hs_preview=BQtmhLbk-11749548756

的链接

我看过一些类似的线程，但是我对JS不够了解。

<div id="slideshow">
<div class="container" style="display: none;">
<img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/home%20banner%20rotate.jpg" class="responsive">
<div class="text-block">
<center>
<h1>Faster fiber deployments<br>Complete network visibility</h1>
</center></div>
</div>
<div class="container" style="display: none;"><img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/mobile%20rotate.jpg" class="responsive">
<div class="text-block">
<center>
<h1>Your network data<br>When and where you need it</h1>
</center></div>
</div>
<div class="container" style="display: none;"><img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/dashboard%20rotate.jpg" class="responsive">
<div class="text-block">
<center>
<h1>Your network data<br>at your fingertips</h1>
</center></div>
</div>
</div>
<script>
$("#slideshow > div:gt(0)") .hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(500)
    .next()
    .fadeIn(500)
    .end()
    .appendTo('#slideshow');
},  4000);
</script>

我希望它从显示的第一张图片开始。

Answer 1

问题在于您的幻灯片演示不会开始淡入图像，直到经过4秒的间隔。为了解决这个问题，您可以使用以下命令手动触发它：

$('#slideshow > div:first').fadeIn(500);

这是一个例子：

$('#slideshow > div:first').fadeIn(500);
setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(500)
    .next()
    .fadeIn(500)
    .end()
    .appendTo('#slideshow');
}, 4000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
  <div class="container" style="display: none;">
    <img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/home%20banner%20rotate.jpg" class="responsive">
    <div class="text-block">
      <center>
        <h1>Faster fiber deployments<br>Complete network visibility</h1>
      </center>
    </div>
  </div>
  <div class="container" style="display: none;"><img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/mobile%20rotate.jpg" class="responsive">
    <div class="text-block">
      <center>
        <h1>Your network data<br>When and where you need it</h1>
      </center>
    </div>
  </div>
  <div class="container" style="display: none;"><img src="https://cdn2.hubspot.net/hubfs/499849/home%20banners/dashboard%20rotate.jpg" class="responsive">
    <div class="text-block">
      <center>
        <h1>Your network data<br>at your fingertips</h1>
      </center>
    </div>
  </div>
</div>

图片幻灯片开始空白

1 个答案: