Question

尝试为页脚中的内容制作一种自动旋转的横幅。问题在于，虽然他们更新幻灯片，但前两个在更改一次后停止，而第三个更新的速度比应该做的要快。每个部分都有唯一的类名，我似乎找不到问题。我认为问题可能出在HTML或JS脚本中，但这确实是我第一次在一个页面上使用多个脚本。（这是一个项目） HTML

<footer>
      <div class = "grid-container" id = "footer-grid">
        <div class = "grid-100 mobile-grid-100 grid-parent" id = "slideshow">
          <div class = "Slide1 grid-33 mobile-grid-33">
            <h1>Slide 1</h1>
          </div>
          <div class = "Slide1 grid-33 mobile-grid-33">
            <h1>Slide 2</h1>
          </div>
          <div class = "Slide1 grid-33 mobile-grid-33">
            <h1>Slide 3</h1>
          </div>
          <div class = "Slide1 grid-33 mobile-grid-33">
            <h1>Slide 4</h1>
          </div>
          <div class = "Slide1 grid-33 mobile-grid-33">
            <h1>Slide 5</h1>
          </div>

          <div class = "Slide grid-33 mobile-grid-33">
            <h1>Slide 1</h1>
          </div>
          <div class = "Slide grid-33 mobile-grid-33">
            <h1>Slide 2</h1>
          </div>
          <div class = "Slide grid-33 mobile-grid-33">
            <h1>Slide 3</h1>
          </div>
          <div class = "Slide grid-33 mobile-grid-33">
            <h1>Slide 4</h1>
          </div>
          <div class = "Slide grid-33 mobile-grid-33">
            <h1>Slide 5</h1>
          </div>

          <div class = "mySlides3 grid-33 mobile-grid-33">
            <h1>Slide 1</h1>
          </div>
          <div class = "mySlides3 grid-33 mobile-grid-33">
            <h1>Slide 2</h1>
          </div>
          <div class = "mySlides3 grid-33 mobile-grid-33">
            <h1>Slide 3</h1>
          </div>
          <div class = "mySlides3 grid-33 mobile-grid-33">
            <h1>Slide 4</h1>
          </div>
          <div class = "mySlides3 grid-33 mobile-grid-33">
            <h1>Slide 5</h1>
          </div>
        </div>
        <div class = "clear"></div>
        <div class = "clear"></div>
        <div class = "grid-100" id = "footer-info">
          <p>some stuff might go here</p>
        </div>
      </div>
    </footer>

    <!-- SCRIPTS -->
    <script>
     var slideIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("Slide1");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > x.length) {slideIndex = 1}
      x[slideIndex-1].style.display = "block";
      setTimeout(carousel, 1000); // Change image every 2 seconds
    }
    </script>
    <script>
     var slideIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("Slide");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > x.length) {slideIndex = 1}
      x[slideIndex-1].style.display = "block";
      setTimeout(carousel, 1000); // Change image every 2 seconds
    }
    </script>
    <script>
     var slideIndex = 0;
    carousel();

    function carousel() {
      var i;
      var x = document.getElementsByClassName("mySlides3");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > x.length) {slideIndex = 1}
      x[slideIndex-1].style.display = "block";
      setTimeout(carousel, 1000); // Change image every 2 seconds
    }
    </script>

CSS

Slide1, .Slide, .mySlides3 {
    display: none;
    border: 1px solid black;
    text-align: center;
    padding-top:10px;
    margin-bottom:10px;
    }

感谢您的帮助，这是我目前使用javascript的唯一真正问题。我似乎无法找到发生这种情况的原因，我尝试过更改类名以使其与众不同。

Answer 1

在全局范围内创建新函数时，基本上是在执行以下操作：

window.carousel = function () { ... }

您有3个脚本部分。执行first时，它将旋转第一个元素。但是之后，第二个脚本块将其覆盖。所以您的代码当前是这样的：

window.carousel = function () { /* logic for elm 1 */ }
window.carousel()
window.carousel = function () { /* logic for elm 2 */ }
window.carousel()
window.carousel = function () { /* logic for elm 3 */ }
window.carousel()

简而言之，3个脚本标签共享一个作用域，因此就是您的问题。解决方案可能是创建一个轮播函数，该函数将id作为参数。无论如何，这是更好的编码实践

Answer 2

您现在可以合并您的JavaScript，并简化自己的工作。您的所有通话都只需要1个轮播功能。每个轮播函数调用之间唯一改变的是类名。因此，将其添加为轮播函数的参数。

    <!-- SCRIPTS -->
    <script>
        var slideIndex = 0;
        carousel("Slide1"); 
        carousel("Slide");  
        carousel("mySlides3");

        function carousel(slideName) {
            var i;
            var x = document.getElementsByClassName(slideName);
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > x.length) {
                slideIndex = 1
            }
            x[slideIndex - 1].style.display = "block";
            setTimeout(function() { carousel(slideName) }, 1000); // Change image every 2 seconds 
        }
    </script>

PS ...您缺少“”。在CSS的Slide1上也是如此。

同一HTML页面上的多个脚本可用于旋转横幅

2 个答案: