首页 > 解决方案 > 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)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</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>

我希望我的侧面导航链接与幻灯片一起使用,当幻灯片加载时,侧面链接不会将我导航到其他页面。

标签: javascripthyperlink

解决方案


推荐阅读