Question

我正在我的页面中初始化幻灯片，我希望在页面完全加载后执行它。

我正在使用带有JavaScript的onload函数来执行此操作。

现在我的问题是我的身体标签中的幻灯片（图像）的组件。我不知道如何用onload函数控制它们。正如您在幻灯片开始之前所知道的那样，图像从页面的顶部到底部形成一个队列。

为了更好地理解我的目的，假设我的身体标签中有一个像这样的图像，并且我不希望它在页面的每个组件（甚至包括音频和幻灯片的JavaScript功能）之前都没有显示完全。

以下是我的代码的一部分，JavaScript包括幻灯片和音频。谢谢

 <script type="text/javascript">

 window.onload = a;

 function a() {
        $(document).ready(function(){
        $('#slideshow').cycle({

x:'curtainX', 
sync:  false,
});
});

 setTimeout(plus1,9000);
function plus1() { 

        $(document).ready(function(){
        $('#slideshow').cycle('pause');
});
}
var music = new Audio("archive.mp3");
music.play(); 

}
</script>
.
.
.
 <body>
  <div id="slideshow">
      <p><img src="10.png" width="420" height="420"/></p>
      <p><img src="9.png" width="420" height="420"/></p>
 </div>
 </body>

Answer 1

您只能特定一次document.ready() 当您进入document.ready()内部时，dom元素已准备好并且窗口已加载你可以这样做：

$(document).ready(function(){
     $('#slideshow').show();
     $('#slideshow').cycle({
          x:'curtainX', 
          sync:  false,
     });

    setTimeout(plus1,9000);
    function plus1() { 
          $('#slideshow').cycle('pause');
    } 
    var music = new Audio("archive.mp3"); music.play();  
 });

这是html

<body>
  <div id="slideshow" style="display:none;">
      <p><img src="10.png" width="420" height="420"/></p>
      <p><img src="9.png" width="420" height="420"/></p>
 </div>
 </body>

使用JavaScript onload函数初始化幻灯片

1 个答案: