Как показать первый слайд при загрузке вкладок на странице с несколькими вкладками - PullRequest
Новая
       1

Как показать первый слайд при загрузке вкладок на странице с несколькими вкладками

0 голосов
/ 08 ноября 2018

У меня есть четыре вкладки, и первая вкладка имеет слайд-шоу. Я могу вызвать первую вкладку при загрузке страницы, но по какой-то причине первый слайд слайд-шоу внутри первой вкладки показывает пустое изображение. Я не могу понять, откуда я могу вызвать функцию 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>

Вставьте ссылку на полный код: https://pastebin.com/Qm0XibKB https://pastebin.com/mGetfw8K

UPDATE:

Этот код работает сейчас: https://pastebin.com/T9FG8VhE

1 Ответ

0 голосов
/ 08 ноября 2018

Вы звоните showSlides(slideIndex); до загрузки HTML и home.php. Я бы попробовал создать функцию обратного вызова для метода .load () и переместить эту строку в эту функцию:

Первый: Удалите 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
...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...