CSS слайдшоу анимации не произойдет - PullRequest
Новая
       1

CSS слайдшоу анимации не произойдет

0 голосов
/ 02 сентября 2018

Я издеваюсь над анимацией слайд-шоу от W3 Schools, интегрировав ее в один из моих веб-сайтов. Слайды меняются в нужное время, но команды fade top / bot, похоже, ничего не делают. Я проверил свои div-ы и javascript, но это обманывает меня, пытаясь что-то высмеять и переводя на мой сайт

есть ли проблема в моем выноске анимации или может быть проблема? 

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  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, 2550);
}
body {
  font: 15px/1.5 Ariel, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}


/*Global Settings*/

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

nav {
  float: right;
  margin-top: 10px;
}


/* Header */

header {
  background: #0D98BA;
  color: #FFD700;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #FF4500 3px solid;
}

#a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header .highlight,
header .current a {
  color: #000000;
  font-weight: bold;
}

header a:hover {
  color: #fffffff;
  font-weight: bold;
}


/* Showcase */

#showcase {
  min-height: 400px;
  background: url('');
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="Developer" content="Alejandro Muratalla / ElitePower">
  <title>Power Training | Home</title>


</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1>Power Clan <span class="highlight">Training</span></h1>
      </div>
      <nav>
        <ul>
          <li><a href="index.html" id="a"><span class="highlight">Home</span></a></li>
          <li><a href="theory.html" id="a">Theory</a></li>
          <li><a href="more.html" id="a">More</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section id="showcase">
    <div class="container">
      <div class="w3-content w3-section" style="max-width:500px">
        <img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
        <img class="slides w3-animate-bottom" src=" https://www.w3schools.com/w3css/img_rr_01.jpg " style="width:100%">
        <img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_03.jpg " style="width:100%">

      </div>

      <h1>Learn Professional Stratagies With Us</h1>
      <p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
    </div>
  </section id="newslater">
  <div class="container">
    <h1>Subscribe To Our Channel</h1>
    <form action="https://www.youtube.com">
      <button id="subscribe">Subscribe</button>
    </form>

    <section id="boxes">
      <div class="container">

        <div class="box">
          <img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
          <h3>Learn Theory</h3>
          <p></p>
        </div>

        <div class="box">
          <img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
          <h3>Explore Team Plays</h3>
          <p></p>
        </div>

        <div class="box">
          <img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
          <h3>Tips and Tricks Videos</h3>
          <p></p>
        </div>

      </div>
    </section>
    <footer>
      <p>&copy; Power Clan Super Rocketball , ElitePower 2018</p>
    </footer>

</body>

</html>

1 Ответ

0 голосов
/ 02 сентября 2018

В javascript имя класса, которое вы использовали - mySlides 

var x = document.getElementsByClassName("mySlides");

но в HTML вы использовали имя класса как slides

Изменитесь с обеих сторон, и он начнет работать. 

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("slides");
  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, 2550);
}
body {
  font: 15px/1.5 Ariel, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}


/*Global Settings*/

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

nav {
  float: right;
  margin-top: 10px;
}


/* Header */

header {
  background: #0D98BA;
  color: #FFD700;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #FF4500 3px solid;
}

#a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

header ul {
  margin: 0;
  padding: 0;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header .highlight,
header .current a {
  color: #000000;
  font-weight: bold;
}

header a:hover {
  color: #fffffff;
  font-weight: bold;
}


/* Showcase */

#showcase {
  min-height: 400px;
  background: url('');
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta name="Developer" content="Alejandro Muratalla / ElitePower">
  <title>Power Training | Home</title>


</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1>Power Clan <span class="highlight">Training</span></h1>
      </div>
      <nav>
        <ul>
          <li><a href="index.html" id="a"><span class="highlight">Home</span></a></li>
          <li><a href="theory.html" id="a">Theory</a></li>
          <li><a href="more.html" id="a">More</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <section id="showcase">
    <div class="container">
      <div class="w3-content w3-section" style="max-width:500px">
        <img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_04.jpg " style="width:100%">
        <img class="slides w3-animate-bottom" src=" https://www.w3schools.com/w3css/img_rr_01.jpg " style="width:100%">
        <img class="slides w3-animate-top" src=" https://www.w3schools.com/w3css/img_rr_03.jpg " style="width:100%">

      </div>

      <h1>Learn Professional Stratagies With Us</h1>
      <p>rggr hgirhg gh rh ruhgrgh rhr rrugrughghrh</p>
    </div>
  </section id="newslater">
  <div class="container">
    <h1>Subscribe To Our Channel</h1>
    <form action="https://www.youtube.com">
      <button id="subscribe">Subscribe</button>
    </form>

    <section id="boxes">
      <div class="container">

        <div class="box">
          <img src=" http://res.freestockphotos.biz/pictures/14/14337-illustration-of-an-open-book-pv.png ">
          <h3>Learn Theory</h3>
          <p></p>
        </div>

        <div class="box">
          <img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Tactics_ballonicon2.svg/150px-Tactics_ballonicon2.svg.png ">
          <h3>Explore Team Plays</h3>
          <p></p>
        </div>

        <div class="box">
          <img src=" https://cdn.pixabay.com/photo/2013/07/12/18/54/idea-153974_960_720.png ">
          <h3>Tips and Tricks Videos</h3>
          <p></p>
        </div>

      </div>
    </section>
    <footer>
      <p>&copy; Power Clan Super Rocketball , ElitePower 2018</p>
    </footer>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...