Странные результаты на нескольких слайд-шоу

Question

Я работал над страницей, на которой несколько изображений должны быть преобразованы в другие изображения, и хотя это работает, большинство слайд-шоу, похоже, останавливаются на втором изображении и просто повторяют его. Они делают затухания / затухания в соответствии с назначением и меняются с разной скоростью в зависимости от предполагаемого эффекта. Но каждое слайд-шоу должно вращаться от 3 до 5 изображений, и большинство из них никогда не появляются вообще. Я новичок в CSS и, возможно, мне не хватает чего-то очевидного, но я не могу понять, что. Особенно удивительно, что некоторые ведут себя не так, как другие, поскольку все они закодированы одинаково. Любая помощь будет принята с благодарностью. Вот конечный продукт: https://www.dvdizzy.com/cp/ Вот код:

var myimages = new Array()

function preloadimages() {
  for (i = 0; i < preloadimages.arguments.length; i++) {
    myimages[i] = new Image()
    myimages[i].src = preloadimages.arguments[i]
  }
}

preloadimages("couple1.jpg", "couple2.jpg", "couple3.jpg", "animated1.jpg", "animated2.jpg", "animated3.jpg", "cold1.jpg", "cold2.jpg", "cold3.jpg", "shock1.jpg", "shock2.jpg", "shock3.jpg", "art1.jpg", "art2.jpg", "art3.jpg", "art4.jpg", "art5.jpg", "colorful1.jpg", "colorful2.jpg", "colorful3.jpg", "group1.jpg", "group2.jpg", "group3.jpg", "epic1.jpg", "epic2.jpg", "epic3.jpg", "hero1.jpg", "hero2.jpg", "hero3.jpg", "hero4.jpg", "tough1.jpg", "tough2.jpg", "tough3.jpg", "tough4.jpg", "tough5.jpg")


var coupleIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("coupleSlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  coupleIndex++;
  if (coupleIndex > x.length) {
    coupleIndex = 1
  }
  x[coupleIndex - 1].style.display = "block";
  setTimeout(carousel, 9000);
}

var animatedIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("animatedSlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  animatedIndex++;
  if (animatedIndex > x.length) {
    animatedIndex = 1
  }
  x[animatedIndex - 1].style.display = "block";
  setTimeout(carousel, 8500);
}

var coldIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("coldSlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  coldIndex++;
  if (coldIndex > x.length) {
    coldIndex = 1
  }
  x[coldIndex - 1].style.display = "block";
  setTimeout(carousel, 7000);
}

var shockIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("shockSlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  shockIndex++;
  if (shockIndex > x.length) {
    shockIndex = 1
  }
  x[shockIndex - 1].style.display = "block";
  setTimeout(carousel, 5500);
}

var artIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("artSlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  artIndex++;
  if (artIndex > x.length) {
    artIndex = 1
  }
  x[artIndex - 1].style.display = "block";
  setTimeout(carousel, 9000);
}

var toughIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("toughSlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  toughIndex++;
  if (toughIndex > x.length) {
    toughIndex = 1
  }
  x[toughIndex - 1].style.display = "block";
  setTimeout(carousel, 12000);
}

var epicIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("epicSlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  epicIndex++;
  if (epicIndex > x.length) {
    epicIndex = 1
  }
  x[epicIndex - 1].style.display = "block";
  setTimeout(carousel, 3000);
}

var colorIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("colorSlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  colorIndex++;
  if (colorIndex > x.length) {
    colorIndex = 1
  }
  x[colorIndex - 1].style.display = "block";
  setTimeout(carousel, 5000);
}

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides9");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 9000);
} <
/script></td >

<
td >

  <
  div class = "w3-content w3-section"
style = "max-width:700px" >
  <
  img class = "mySlides10 w3-animate-fading"
src = "hero1.jpg"
style = "width:100%"
alt = "" >
  <
  img class = "mySlides10 w3-animate-fading"
src = "hero2.jpg"
style = "width:100%"
alt = "" >
  <
  img class = "mySlides10 w3-animate-fading"
src = "hero3.jpg"
style = "width:100%"
alt = "" >
  <
  img class = "mySlides10 w3-animate-fading"
src = "hero4.jpg"
style = "width:100%"
alt = "" >
  <
  /div>

  <
  script >
  var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides10");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 9000);
}

div.a {
  text-align: center;
}

<link rel="stylesheet" href="w3.css">


<center>
  <div align="center">

    <table border="0">
      <tr>
        <td>

          <div class="w3-content w3-section" style="max-width:700px">
            <img class="coupleSlides w3-animate-fading" src="couple1.jpg" style="width:100%" alt="">
            <img class="coupleSlides w3-animate-fading" src="couple2.jpg" style="width:100%" alt="">
            <img class="coupleSlides w3-animate-fading" src="couple3.jpg" style="width:100%" alt="">
          </div>


        </td>
        <td>

          <div class="w3-content w3-section" style="max-width:700px">
            <img class="animatedSlides w3-animate-fading" src="animated1.jpg" style="width:100%" alt="">
            <img class="animatedSlides w3-animate-fading" src="animated2.jpg" style="width:100%" alt="">
            <img class="animatedSlides w3-animate-fading" src="animated3.jpg" style="width:100%" alt="">
          </div>
        </td>

        <td>

          <div class="w3-content w3-section" style="max-width:700px">
            <img class="coldSlides w3-animate-fading" src="cold1.jpg" style="width:100%" alt="">
            <img class="coldSlides w3-animate-fading" src="cold2.jpg" style="width:100%" alt="">
            <img class="coldSlides w3-animate-fading" src="cold3.jpg" style="width:100%" alt="">
          </div>
        </td>

      </tr>
      <tr>
        <td>
          <div class="w3-content w3-section" style="max-width:700px">
            <img class="shockSlides w3-animate-fading" src="shock1.jpg" style="width:100%" alt="">
            <img class="shockSlides w3-animate-fading" src="shock2.jpg" style="width:100%" alt="">
            <img class="shockSlides w3-animate-fading" src="shock3.jpg" style="width:100%" alt="">
          </div>
        </td>

        <td align="center" valign="bottom">
          <font face="Futura" size="5" color="#FFFFFF"><b>DVDizzy.com</b><br></font>
        </td>


        <td>
          <div class="w3-content w3-section" style="max-width:700px">
            <img class="artSlides w3-animate-fading" src="art1.jpg" style="width:100%" alt="">
            <img class="artSlides w3-animate-fading" src="art2.jpg" style="width:100%" alt="">
            <img class="artSlides w3-animate-fading" src="art3.jpg" style="width:100%" alt="">
            <img class="artSlides w3-animate-fading" src="art4.jpg" style="width:100%" alt="">
            <img class="artSlides w3-animate-fading" src="art5.jpg" style="width:100%" alt="">
          </div>

          <script>
          </script>
        </td>
      </tr>

      <tr>
        <td>
          <div class="w3-content w3-section" style="max-width:700px">
            <img class="toughSlides w3-animate-fading" src="tough1.jpg" style="width:100%" alt="">
            <img class="toughSlides w3-animate-fading" src="tough4.jpg" style="width:100%" alt="">
            <img class="toughSlides w3-animate-fading" src="tough2.jpg" style="width:100%" alt="">
            <img class="toughSlides w3-animate-fading" src="tough3.jpg" style="width:100%" alt="">
            <img class="toughSlides w3-animate-fading" src="tough5.jpg" style="width:100%" alt="">
          </div>
        </td>

        <td align="center" valign="center">
          <font face="Futura" color="#FFFFFF">
            <font size="6"><b>#CenturyProject</b></font>

            <br><br><br>
            <font size="3"><i>Coming soon</i></font>
          </font>
        </td>


        <td>
          <div class="w3-content w3-section" style="max-width:700px">
            <img class="epicSlides w3-animate-fading" src="epic3.jpg" style="width:100%" alt="">
            <img class="epicSlides w3-animate-fading" src="epic1.jpg" style="width:100%" alt="">
            <img class="epicSlides w3-animate-fading" src="epic2.jpg" style="width:100%" alt="">
          </div>
        </td>
      </tr>

      <tr>

        <td>
          <div class="w3-content w3-section" style="max-width:700px">
            <img class="colorSlides w3-animate-fading" src="colorful1.jpg" style="width:100%" alt="">
            <img class="colorSlides w3-animate-fading" src="colorful2.jpg" style="width:100%" alt="">
            <img class="colorSlides w3-animate-fading" src="colorful3.jpg" style="width:100%" alt="">
          </div>

        </td>



        <td>

          <div class="w3-content w3-section" style="max-width:700px">
            <img class="mySlides9 w3-animate-fading" src="group1.jpg" style="width:100%" alt="">
            <img class="mySlides9 w3-animate-fading" src="group2.jpg" style="width:100%" alt="">
            <img class="mySlides9 w3-animate-fading" src="group3.jpg" style="width:100%" alt="">
          </div>
        </td>

      </tr>
    </table>

  </div>
</center>

Answer 1

Должны быть все функции карусели и переменные индекса слайда уникальны.

Проверьте ниже фрагмент.

<!DOCTYPE html>
<html lang="en">
<title>#CenturyProject - DVDizzy.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://www.dvdizzy.com/cp/w3.css">

<body bgcolor="#000000">

  <script>

    var myimages = new Array()
    function preloadimages() {
      for (i = 0; i < preloadimages.arguments.length; i++) {
        myimages[i] = new Image()
        myimages[i].src = preloadimages.arguments[i]
      }
    }

    preloadimages("https://www.dvdizzy.com/cp/couple1.jpg", "https://www.dvdizzy.com/cp/couple2.jpg", "https://www.dvdizzy.com/cp/couple3.jpg", "https://www.dvdizzy.com/cp/animated1.jpg", "https://www.dvdizzy.com/cp/animated2.jpg", "https://www.dvdizzy.com/cp/animated3.jpg", "https://www.dvdizzy.com/cp/cold1.jpg", "https://www.dvdizzy.com/cp/cold2.jpg", "https://www.dvdizzy.com/cp/cold3.jpg", "https://www.dvdizzy.com/cp/shock1.jpg", "https://www.dvdizzy.com/cp/shock2.jpg", "https://www.dvdizzy.com/cp/shock3.jpg", "https://www.dvdizzy.com/cp/art1.jpg", "https://www.dvdizzy.com/cp/art2.jpg", "https://www.dvdizzy.com/cp/art3.jpg", "https://www.dvdizzy.com/cp/art4.jpg", "https://www.dvdizzy.com/cp/art5.jpg", "https://www.dvdizzy.com/cp/colorful1.jpg", "https://www.dvdizzy.com/cp/colorful2.jpg", "https://www.dvdizzy.com/cp/colorful3.jpg", "https://www.dvdizzy.com/cp/group1.jpg", "https://www.dvdizzy.com/cp/group2.jpg", "https://www.dvdizzy.com/cp/group3.jpg", "https://www.dvdizzy.com/cp/epic1.jpg", "https://www.dvdizzy.com/cp/epic2.jpg", "https://www.dvdizzy.com/cp/epic3.jpg", "https://www.dvdizzy.com/cp/hero1.jpg", "https://www.dvdizzy.com/cp/hero2.jpg", "https://www.dvdizzy.com/cp/hero3.jpg", "https://www.dvdizzy.com/cp/hero4.jpg", "https://www.dvdizzy.com/cp/tough1.jpg", "https://www.dvdizzy.com/cp/tough2.jpg", "https://www.dvdizzy.com/cp/tough3.jpg", "https://www.dvdizzy.com/cp/tough4.jpg", "https://www.dvdizzy.com/cp/tough5.jpg")

  </script>

  <center>
    <div align="center">
      div.a {
      text-align: center;
      }
      <table border="0">
        <tr>
          <td>

            <div class="w3-content w3-section" style="max-width:700px">
              <img class="coupleSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/couple1.jpg"
                style="width:100%" alt="">
              <img class="coupleSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/couple2.jpg"
                style="width:100%" alt="">
              <img class="coupleSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/couple3.jpg"
                style="width:100%" alt="">
            </div>

            <script>
              var coupleIndex = 0;
              carousel1();

              function carousel1() {
                var i;
                var x = document.getElementsByClassName("coupleSlides");
                for (i = 0; i < x.length; i++) {
                  x[i].style.display = "none";
                }
                coupleIndex++;
                if (coupleIndex > x.length) { coupleIndex = 1 }
                x[coupleIndex - 1].style.display = "block";
                setTimeout(carousel1, 9000);
              }
            </script>

          </td>

          <td>

            <div class="w3-content w3-section" style="max-width:700px">
              <img class="animatedSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/animated1.jpg"
                style="width:100%" alt="">
              <img class="animatedSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/animated2.jpg"
                style="width:100%" alt="">
              <img class="animatedSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/animated3.jpg"
                style="width:100%" alt="">
            </div>

            <script>
              var animatedIndex = 0;
              carousel2();

              function carousel2() {
                var i;
                var x = document.getElementsByClassName("animatedSlides");
                for (i = 0; i < x.length; i++) {
                  x[i].style.display = "none";
                }
                animatedIndex++;
                if (animatedIndex > x.length) { animatedIndex = 1 }
                x[animatedIndex - 1].style.display = "block";
                setTimeout(carousel2, 8500);
              }
            </script>
          </td>

          <td>
            <div class="w3-content w3-section" style="max-width:700px">
              <img class="coldSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/cold1.jpg" style="width:100%"
                alt="">
              <img class="coldSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/cold2.jpg" style="width:100%"
                alt="">
              <img class="coldSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/cold3.jpg" style="width:100%"
                alt="">
            </div>

            <script>
              var coldIndex = 0;
              carousel3();

              function carousel3() {
                var i;
                var x = document.getElementsByClassName("coldSlides");
                for (i = 0; i < x.length; i++) {
                  x[i].style.display = "none";
                }
                coldIndex++;
                if (coldIndex > x.length) { coldIndex = 1 }
                x[coldIndex - 1].style.display = "block";
                setTimeout(carousel3, 7000);
              }
            </script>
          </td>
        </tr>

        <tr>
          <td>
            <div class="w3-content w3-section" style="max-width:700px">
              <img class="shockSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/shock1.jpg" style="width:100%"
                alt="">
              <img class="shockSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/shock2.jpg" style="width:100%"
                alt="">
              <img class="shockSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/shock3.jpg" style="width:100%"
                alt="">
            </div>

            <script>
              var shockIndex = 0;
              carousel4();

              function carousel4() {
                var i;
                var x = document.getElementsByClassName("shockSlides");
                for (i = 0; i < x.length; i++) {
                  x[i].style.display = "none";
                }
                shockIndex++;
                if (shockIndex > x.length) { shockIndex = 1 }
                x[shockIndex - 1].style.display = "block";
                setTimeout(carousel4, 7500);
              }
            </script>
          </td>

          <td align="center" valign="bottom">
            <font face="Futura" size="5" color="#FFFFFF"><b>DVDizzy.com</b><br></font>
          </td>

          <td>
            <div class="w3-content w3-section" style="max-width:700px">
              <img class="artSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/art1.jpg" style="width:100%"
                alt="">
              <img class="artSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/art2.jpg" style="width:100%"
                alt="">
              <img class="artSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/art3.jpg" style="width:100%"
                alt="">
              <img class="artSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/art4.jpg" style="width:100%"
                alt="">
              <img class="artSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/art5.jpg" style="width:100%"
                alt="">
            </div>

            <script>
              var artIndex = 0;
              carousel5();

              function carousel5() {
                var i;
                var x = document.getElementsByClassName("artSlides");
                for (i = 0; i < x.length; i++) {
                  x[i].style.display = "none";
                }
                artIndex++;
                if (artIndex > x.length) { artIndex = 1 }
                x[artIndex - 1].style.display = "block";
                setTimeout(carousel5, 9000);
              }
            </script>
          </td>
        </tr>

        <tr>
          <td>
            <div class="w3-content w3-section" style="max-width:700px">
              <img class="toughSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/tough1.jpg" style="width:100%"
                alt="">
              <img class="toughSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/tough4.jpg" style="width:100%"
                alt="">
              <img class="toughSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/tough2.jpg" style="width:100%"
                alt="">
              <img class="toughSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/tough3.jpg" style="width:100%"
                alt="">
              <img class="toughSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/tough5.jpg" style="width:100%"
                alt="">
            </div>

            <script>
              var toughIndex = 0;
              carousel6();

              function carousel6() {
                var i;
                var x = document.getElementsByClassName("toughSlides");
                for (i = 0; i < x.length; i++) {
                  x[i].style.display = "none";
                }
                toughIndex++;
                if (toughIndex > x.length) { toughIndex = 1 }
                x[toughIndex - 1].style.display = "block";
                setTimeout(carousel6, 12000);
              }
            </script>
          </td>

          <td align="center" valign="center">
            <font face="Futura" color="#FFFFFF">
              <font size="6"><b>#CenturyProject</b></font>

              <br><br><br>
              <font size="3"><i>Coming soon</i></font>
            </font>
          </td>

          <td>
            <div class="w3-content w3-section" style="max-width:700px">
              <img class="epicSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/epic1.jpg" style="width:100%" alt="">
              <img class="epicSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/epic2.jpg" style="width:100%" alt="">
              <img class="epicSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/epic3.jpg" style="width:100%" alt="">
            </div>

            <script>
              var epicIndex = 0;
              carousel7();

              function carousel7() {
                var i;
                var x = document.getElementsByClassName("epicSlides");
                for (i = 0; i < x.length; i++) {
                  x[i].style.display = "none";
                }
                epicIndex++;
                if (epicIndex > x.length) { epicIndex = 1 }
                x[epicIndex - 1].style.display = "block";
                setTimeout(carousel7, 7000);
              }
            </script>
          </td>
        </tr>

        <tr>
          <td>
            <div class="w3-content w3-section" style="max-width:700px">
              <img class="colorSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/colorful1.jpg"
                style="width:100%" alt="">
              <img class="colorSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/colorful2.jpg"
                style="width:100%" alt="">
              <img class="colorSlides w3-animate-fading" src="https://www.dvdizzy.com/cp/colorful3.jpg"
                style="width:100%" alt="">
            </div>

            <script>
              var colorIndex = 0;
              carousel8();

              function carousel8() {
                var i;
                var x = document.getElementsByClassName("colorSlides");
                for (i = 0; i < x.length; i++) {
                  x[i].style.display = "none";
                }
                colorIndex++;
                if (colorIndex > x.length) { colorIndex = 1 }
                x[colorIndex - 1].style.display = "block";
                setTimeout(carousel8, 5000);
              }
            </script>

          </td>

          <td>

            <div class="w3-content w3-section" style="max-width:700px">
              <img class="groupslide w3-animate-fading" src="https://www.dvdizzy.com/cp/group1.jpg" style="width:100%"
                alt="">
              <img class="groupslide w3-animate-fading" src="https://www.dvdizzy.com/cp/group2.jpg" style="width:100%"
                alt="">
              <img class="groupslide w3-animate-fading" src="https://www.dvdizzy.com/cp/group3.jpg" style="width:100%"
                alt="">
            </div>

            <script>
              var groupIndex = 0;
              carousel9();

              function carousel9() {
                var i;
                var x = document.getElementsByClassName("groupslide");
                for (i = 0; i < x.length; i++) {
                  x[i].style.display = "none";
                }
                groupIndex++;
                if (groupIndex > x.length) { groupIndex = 1 }
                x[groupIndex - 1].style.display = "block";
                setTimeout(carousel9, 9000);
              }
            </script>
          </td>

          <td>

            <div class="w3-content w3-section" style="max-width:700px">
              <img class="heroslide w3-animate-fading" src="https://www.dvdizzy.com/cp/hero1.jpg" style="width:100%"
                alt="">
              <img class="heroslide w3-animate-fading" src="https://www.dvdizzy.com/cp/hero2.jpg" style="width:100%"
                alt="">
              <img class="heroslide w3-animate-fading" src="https://www.dvdizzy.com/cp/hero3.jpg" style="width:100%"
                alt="">
              <img class="heroslide w3-animate-fading" src="https://www.dvdizzy.com/cp/hero4.jpg" style="width:100%"
                alt="">
            </div>

            <script>
              var heroIndex = 0;
              carousel10();

              function carousel10() {
                var i;
                var x = document.getElementsByClassName("heroslide");
                for (i = 0; i < x.length; i++) {
                  x[i].style.display = "none";
                }
                heroIndex++;
                if (heroIndex > x.length) { heroIndex = 1 }
                x[heroIndex - 1].style.display = "block";
                setTimeout(carousel10, 9000);
              }
            </script>
          </td>
        </tr>

      </table>
    </div>
  </center>
</body>

</html>