我使用非常标准的代码在网站顶部显示幻灯片:
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 文件中时，幻灯片中的初始 幻灯片无法正确显示。具体问题如下:
1) 幻灯片不是从第一张幻灯片开始的。当页面首次出现时，第 3 张幻灯片最先显示。
2) 然后，出现第一张幻灯片。但是，在显示下一张幻灯片之前，它的淡入淡出完成，然后不透明度增加到 1。
3) 此后，幻灯片播放正确。
因此，该问题是一个暂时性问题。一旦建立稳态，就没有问题。
我认为这可能是由于加载外部 JS 文件所花费的时间所致。
我该如何解决这个问题？
最佳答案
将您的代码初始化放在ready(function) 中
像这样
jQuery(document).ready(function(){
//your code here
});
这将在 JS 文件完全加载后运行，因此不会干扰幻灯片。
关于javascript - 从外部 JS 文件加载时幻灯片显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55428976/