Question

我正在使用非常标准的代码在网站顶部显示幻灯片：

HTML：

  <body id="Top"
        onload="showSlides()">
    ...

    <div id="slides">
      <div id="slide1" class="slides fade"></div>
      <div id="slide2" class="slides fade"></div>
      <div id="slide3" class="slides fade"></div>
      <div id="slide4" class="slides fade"></div>
      <div id="slide5" class="slides fade"></div>
    </div>

    <div id="dotbox">
      <span class="dot"></span> 
      <span class="dot"></span> 
      <span class="dot"></span> 
      <span class="dot"></span> 
      <span class="dot"></span> 
    </div>

    ...

  </body>

JS：

/* Start a slideshow. */
var slideIndex = 0;

function showSlides()
{
  var i;
  var slides = document.getElementsByClassName("slides");
  var dots = document.getElementsByClassName("dot");

  for (i = 0; i < slides.length; i++)
  {
    slides[i].style.display = "none";  
  }

  slideIndex++;

  if (slideIndex > slides.length) 
  {
    slideIndex = 1
  }

  for (i = 0; i < dots.length; i++)
  {
    dots[i].className = dots[i].className.replace(" activedot", "");
  }

  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " activedot";

  // Change image every 3 seconds
  setTimeout(showSlides, 3000);
}

幻灯片包含5张幻灯片；每张幻灯片淡出3秒钟，然后出现下一张幻灯片。这是控制淡入淡出的相关CSS，这又是非常标准的：

CSS：

  /* Fading animation class */
  .fade
  {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 3s;
    animation-name: fade;
    animation-duration: 3s;
  }

  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes fade
  {
    from 
    {
      opacity: .4;
    } 

    to
    {
      opacity: .1;
    }
  }

  /* Standard syntax */
  @keyframes fade
  {
    from 
    {
      opacity: .4;
      filter: alpha(opacity=40);    /* For IE8 and earlier */
    } 

    to
    {
      opacity: .1;
      filter: alpha(opacity=10);    /* For IE8 and earlier */
    }
  }

当JS函数内部存储在HTML文件中时，幻灯片演示可以正常工作。

但是，当将其存储在链接到HTML文件的外部 JS文件中时，幻灯片中的 initial 幻灯片无法正确显示。具体来说，问题如下：
1）幻灯片放映不是从第一张幻灯片开始的。页面首次出现时，第三个幻灯片是第一个显示。
2）然后，出现第一张幻灯片。但是，它的淡入淡出完成，然后不透明度增加到1，然后显示下一张幻灯片。
3）此后，幻灯片将正确播放。

因此，问题是一个瞬变问题。一旦建立了稳态，就没有问题。

我认为这可能是由于加载外部JS文件所花费的时间造成的。

如何解决此问题？

Answer 1

将代码初始化放在ready(function)中像这样

jQuery(document).ready(function(){
  //your code here
});

此操作将在JS文件完全加载后运行，因此不会分散幻灯片的注意力。

从外部JS文件加载幻灯片时，幻灯片无法正确显示

1 个答案: