Несколько скриптов на одной HTML-странице для вращения баннера

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

Вы можете консолидировать свой 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 ... Вам не хватает "."на Slide1 в вашем css.

Answer 2

Когда вы создаете новую функцию в глобальной области видимости, вы в основном делаете следующее:

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

У вас есть 3 части скриптов.Когда выполняется первый, он поворачивает первый элемент.Но после этого он перезаписывается вторым блоком скрипта.Таким образом, ваш код выглядит примерно так:

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 в качестве аргумента.В любом случае, это лучшая практика кодирования