Question

我有四个选项卡，第一个选项卡具有幻灯片放映。我能够在页面加载时触发第一个标签，但是由于某种原因，第一个标签内的幻灯片放映的第一张幻灯片显示空白图像。我无法确定从哪里可以调用showSldies（）函数来在选项卡加载后立即在幻灯片放映中加载第一张图像。任何帮助，将不胜感激。

这是主索引页面：

<html>
    <head>
        <title>BHU MCA Portal</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="material.css">
        <script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> 
       </script>
        <script>
                var slideIndex = 1;
                showSlides(slideIndex);

                function plusSlides(n) {
                showSlides(slideIndex += n);
                }

                function currentSlide(n) {
                showSlides(slideIndex = n);
                }

                function showSlides(n) {
                var i;
                var slides = document.getElementsByClassName("mySlides");
                var dots = document.getElementsByClassName("dot");
                if (n > slides.length) {slideIndex = 1}    
                if (n < 1) {slideIndex = slides.length}
                for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";  
                }
                for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
                }
                slides[slideIndex-1].style.display = "block";  
                dots[slideIndex-1].className += " active";
                }
        </script>
        <script type="text/javascript" language="javascript">
        $(document).ready(function() { /// Wait till page is loaded
        $('#main').load('home.php #main');
        var elements = document.getElementsByTagName('a');
            for(var i = 0, len = elements.length; i < len; i++) {
            elements[i].onclick = function () {
                $('#main').load(this.id+'.php #main');
                var current = document.getElementsByClassName("active");
                current[0].className = current[0].className.replace("active", "");
                this.className += "active";
                }
            }
        }); //// End of Wait till page is loaded
        </script>
    </head>
    <div>
        <center><img src="img/logo_main.png" height="20%" width="30%"></center>
    </div>
    <ul>
        <li><a href="#" id="home" class="active">Home</a></li>
        <li><a href="#" id="portal">Attendance Portal</a></li>
        <li><a href="#" id="about" onclick="openLink(event, 'Right')">About</a></li>
        <li><a href="#" id="contact">Contact Us</a></li>
    </ul>

        <div style="display:flex;">
        <div id="main" style="flex-grow:1;"></div>
        <div style="line-height: 25px; font-style: italic;">
            <img src="img/mmm.jpg" style="display: inline-block;" >
            <p>"Religion of students is acquisition of knowledge"</p>
            <p align="right">~ Mahamana Pt Madan Mohan Malaviya</p>
        </div>
    </div>

</html>

这是home.php

<html>
<head>
</head>
<div id="main" class="form w3-animate-top">
<div class="slideshow-container">

        <div class="mySlides fade">
          <div class="numbertext">1 / 4</div>
          <img src="images\15.jpg" style="width:100%">
          <div class="text">Administration Building</div>
        </div>

        ...<more slides here>


        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
   <span class="dot" onclick="currentSlide(3)"></span> 
</div>
<br>
</div>
</html>

Pastebin链接以完成代码： https://pastebin.com/Qm0XibKB https://pastebin.com/mGetfw8K

更新：

此代码现在可以工作： https://pastebin.com/T9FG8VhE

Answer 1

在HTML和home.php加载之前，您致电showSlides(slideIndex);。我会尝试创建一个Callback Function for the .load() method并将此行移动到该函数中：

首先：从脚本顶部删除showSlides(slideIndex);

...
var slideIndex = 1;
//remove from here
//showSlides(slideIndex);

function plusSlides(n) {
...

第二步：为.load（）方法创建回调函数，并将showSlides(slideIndex);插入该函数中

...
$(document).ready(function() { /// Wait till page is loaded
    $('#main').load('home.php #main', function() { //begin Callback Function
        var elements = document.getElementsByTagName('a');
        for(var i = 0, len = elements.length; i < len; i++) {
            elements[i].onclick = function () {
                $('#main').load(this.id+'.php #main');
                var current = document.getElementsByClassName("active");
                current[0].className = current[0].className.replace("active", "");
                this.className += "active";
            }
        }
        showSlides(slideIndex); //insert here
    }); //end Callback Function

}); //// End of Wait till page is loaded
...

如何在多标签页的标签加载中显示第一张幻灯片

1 个答案: