javascript - PHP平台内置网页侧链接问题
问题描述
来自页面的 Web 控制台我有一个基于 PHP 平台的简单网站,然后我决定在其中一个特定页面上添加一个自动 JavaScript 滑块,在此之前侧链接工作正常,但是当自动幻灯片放映时侧链接不不行。我再次删除了幻灯片代码,然后它又可以正常工作了?我的问题是如何使 js 幻灯片和侧链接工作?
我尝试搜索查询,使用 div 和标签,但找不到解决方案
<div id="slide">
<div class="slideshow-container">
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 1.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 6.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 7.png" style="width:100%" alt=""> </div>
<div class="mySlides fade"> <img src="<?php echo $this->baseurl ?>/images/alumni 9.png" style="width:100%" alt=""> </div>
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div>
<tr>
<td>
<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(4)"></span>
<script>
var slideIndex = 0;
showSlides();
var slides,dots;
function showSlides() {
var i;
slides = document.getElementsByClassName("mySlides");
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(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 8000); // Change image every 8 seconds
}
function plusSlides(position) {
slideIndex +=position;
if (slideIndex> slides.length) {slideIndex = 1}
else if(slideIndex<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";
}
function currentSlide(index) {
if (index> slides.length) {index = 1}
else if(index<1){index = 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[index-1].style.display = "block";
dots[index-1].className += " active";
}
</script>
</div>
</td>
</tr>
</div>
</td>
</tr>
我希望我的侧面导航链接与幻灯片一起使用,当幻灯片加载时,侧面链接不会将我导航到其他页面。