Javascript 如何在多选项卡页面上显示选项卡加载时的第一张幻灯片
我有四个选项卡，第一个选项卡有幻灯片放映。 我能够在页面加载时触发第一个选项卡，但由于某些原因，第一个选项卡内幻灯片放映的第一张幻灯片显示了一个空白图像。我不知道从哪里可以调用showSldies（）函数，在加载选项卡后立即加载幻灯片中的第一幅图像。任何帮助都将不胜感激 这是主索引页：Javascript 如何在多选项卡页面上显示选项卡加载时的第一张幻灯片,javascript,php,html,ajax,Javascript,Php,Html,Ajax,我有四个选项卡，第一个选项卡有幻灯片放映。 我能够在页面加载时触发第一个选项卡，但由于某些原因，第一个选项卡内幻灯片放映的第一张幻灯片显示了一个空白图像。我不知道从哪里可以调用showSldies（）函数，在加载选项卡后立即加载幻灯片中的第一幅图像。任何帮助都将不胜感激 这是主索引页： <html> <head> <title>BHU MCA Portal</title> <meta name="vie
<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>
BHU MCA门户
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i
“学生的宗教是知识的获得”
~Mahamana Pt Madan Mohan Malaviya
<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)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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>
1/4
行政大楼
...
更新：
此代码现在起作用：
您可以调用showSlides（slideIndex）在加载HTML和home.php之前。我会尝试创建一个函数，并将这一行移动到该函数中：
首先：删除放映幻灯片（slideIndex）从脚本顶部开始
...
var slideIndex = 1;
//remove from here
//showSlides(slideIndex);
function plusSlides(n) {
...
Second:为.load（）方法创建回调函数并插入showsiles（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
...
。。。
$（document）.ready（function（）{///等待页面加载
$（'#main'）.load（'home.php#main'，function（）{//begin Callback function
var elements=document.getElementsByTagName（'a'）；
for（var i=0，len=elements.length；i
GetElementsByCassName与element.classList.contains（）不同。你正在寻找“mySlides”，而你只有“mySlidesfade”mySlides和fade是不同的类。你能详细说明你评论的第一部分吗？是的，我明白了。那是个打字错误。我的意思是“我的脸会褪色”。getElementsByClassName（“whatever”）将查找其类仅为“whatever”的任何元素。不，只要它有那个类。尝试从每张幻灯片中删除淡入淡出样式。仍然不起作用。我没有提供答案，我只是对代码进行了评论。有关答案，请参阅答案。我正在本地机器上工作。以下是完整的代码：并且您确定已删除showsileds（slideIndex）之后var slideIndex=1
并将其作为$（文档）.ready（函数（）{}的最后一行插入
block？你能将完整更新的索引页代码发布到pastebin.com吗？是的，我发布了。仍然是同一个问题。以下是更新的代码：我已经更新了我的解决方案。请尝试一下该代码并让我知道。明白了。我刚刚将slideIndex初始化移动到错误的位置。它现在正在工作。但现在我面临导航问题：