基本的JavaScript图像 - 轮播无法正常工作

时间：2017-09-12 19:59:28

标签： javascript image carousel

我正在edX上学习这门课程，在家庭作业中，他们让我们通过JavaScript自动构建一个带有旋转木马图像的网页。 EdX提供了详细的所有步骤，因此您认为我可以复制并粘贴并且可以正常使用;不幸的是，事实并非如此。

var slideInterval = 3500;

function getFigures() {
  return document.getElementById('carousel').getElementsByTagName('figure');
}

function moveForward() {
  var pointer;
  var figures = getFigures();
  for (var i = 0; i < figures.length; i++) {
    if (figures[i].className == 'visible') {
      figures[i].className = '';
      pointer = i;
    }
  }
  if (++pointer == figures.length) {
    pointer = 0;
  }
  figures[pointer].className = 'visible';
  setTimeout(moveForward, slideInterval);
}

function startPlayback() {
  setTimeout(moveForward, slideInterval);
}
startPlayback();
@media not print {
  body {
    color: #635959;
  }
  header {
    background-color: #242323;
    color: #EFEFEF;
  }
  h3,
  article h4 {
    color: #8C1018;
  }
  article a {
    color: #314052;
  }
}

header h1 {
  font-size: 4em;
}

main figure>figcaption {
  font-size: 0.75em;
  font-style: italic;
}

main figure>figcaption::before {
  content: "Pictured above";
  font-weight: bold;
}

article>time {
  float: right;
  font-size: 0.75em;
  font-weight: lighter;
}

@media not print {
  main>h3 {
    font-size: 2em;
  }
}

header {
  padding: 20px 50px;
}

main {
  padding: 5px 10px
}

@font-face {
  font-family: 'News Cycle';
  src: url('../fonts/mod3_news_cycle.ttf') format('truetype');
}

body {
  font-family: 'News Cycle'
}

@font-face {
  font-family: 'Contrail One';
  src: url('../fonts/mod3_contrail_one.ttf');
}

header {
  font-family: 'Contrail One'
}

article {
  margin: 5px 0px;
  padding: 5px 5px;
  box-shadow: -1px -1px 6px #888888
}

@media print {
  header {
    padding: 0px;
  }
  article {
    box-shadow: none;
  }
  header h1 {
    font-size: 2em;
  }
  header h2 {
    display: none;
  }
}

section#carousel>figure>img {
  display: none;
  margin: 0px auto;
}

section#carousel>figure.visible>img {
  display: block;
  position: relative;
  overflow: hidden;
}

section#carousel>figure>figcaption {
  display: none;
}

section#carousel>figure.visible>figcaption {
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
}
<!DOCTYPE html>
<html lang="US-en">

<head>
  <title>Contoso News</title>
  <link rel="stylesheet" href="css/style.css" />
  <script rel="text/javascript" href="js/script.js" /></script>
</head>

<body>
  <header>
    <h1>Contoso News</h1>
    <h2>On Time, On Topic</h2>
  </header>
  <section id="carousel">
    <figure class="visible">
      <img src="img/efficient_cars.png" alt="Efficient Cars" />
      <figcaption>2017 Cars Promise to be More Fuel Efficient Than Ever</figcaption>
    </figure>
    <figure>
      <img src="img/natural_disaster.png" alt="Natural Disaster" />
      <figcaption>Hurricane Threatens to Touch Down on the East Coast This Weekend</figcaption>
    </figure>
    <figure>
      <img src="img/health_records.png" alt="Health Records" />
      <figcaption>Many Doctors are Moving to Digital Health Records This Year</figcaption>
    </figure>
  </section>
  <main>
    <h3>Latest Articles</h3>
    <article>
      <time datetime="16-01-2016">Friday, Jan 16</time>
      <h4>International Story</h4>
      <p> Curabitur pharetra luctus augue, non posuere orci tristique vel. Sed posuere nisi nec lacus ullamcorper, ac vulputate nisl consequat. Nullam sollicitudin nulla vel felis faucibus aliquam. Nunc sit amet velit orci. Proin sed orci fringilla, elementum
        felis condimentum, convallis augue. Aliquam erat volutpat. Mauris tempus nunc sit amet aliquet bibendum. Praesent vestibulum cursus ex, quis laoreet eros consectetur ac. Ut congue libero quis mauris egestas feugiat. Sed pharetra lorem et magna
        fringilla, a volutpat nibh sollicitudin. Nullam sagittis sollicitudin urna, sed sollicitudin mauris ornare id. <a href="#" Target="_blank">Read More...</a>
      </p>
    </article>
    <article>
      <time datetime="16-14-2016">Wednesday,Jan 14</time>
      <h4>Finance Story</h4>
      <p>
        Nullam tempor mi at libero elementum varius. Sed lobortis lacus feugiat est tristique, nec imperdiet turpis scelerisque. Ut sed urna malesuada, scelerisque dui sit amet, tempus mauris. Integer bibendum egestas urna, a bibendum sem gravida quis. Cras accumsan
        rhoncus vestibulum. Nam eu blandit leo. Integer at consectetur nunc, et tempus urna. Integer sit amet sollicitudin elit. Donec nec posuere erat. Sed vestibulum nisl neque, vitae tincidunt ex molestie quis. Nulla fringilla viverra turpis in volutpat.
        Cras vel orci quis velit efficitur ullamcorper sed eu ex.
      </p>
      <figure>
        <img src="img/chip_debit.png" alt="Debit Card with Chip" />
        <figcaption>New Debit Cards with Chip-Based Security</figcaption>
      </figure>
      <p>
        Nullam vel ex nec lectus imperdiet luctus vitae vel nibh. Donec eleifend velit eros, eu efficitur justo molestie id. In egestas gravida lectus. Ut ipsum odio, suscipit sit amet molestie non, scelerisque sed mi. Aenean sed augue eu arcu faucibus molestie.
        Sed eget ante gravida, rhoncus velit eu, tempus quam. Sed fermentum at odio sed commodo. Fusce lobortis cursus purus, quis consequat est faucibus at. Etiam massa felis, sodales at sodales sed, iaculis quis arcu. <a href="#" target="_blank">Read More...</a>
      </p>
    </article>
    <article>
      <time datetime="16-14-2016">Wednesday, Jan 14</time>
      <h4>Technology Story</h4>
      <p>Morbi eget justo ut velit dapibus malesuada. Nunc elementum, neque quis convallis tempus, lacus ante tristique est, id porta tortor leo eget orci. Suspendisse hendrerit interdum lacus et condimentum. Mauris at ex dignissim, bibendum libero at, fermentum
        lectus. Maecenas porttitor purus quis augue interdum, eget malesuada neque placerat. Ut hendrerit risus in nibh elementum, quis vestibulum ipsum vulputate. Nulla facilisi. In consectetur et lacus vel tincidunt. Quisque feugiat ipsum et erat rhoncus
        efficitur. In in augue at enim tempor sollicitudin. <a href="#" Target="_blank">Read More...</a>
      </p>
    </article>
  </main>
  <h4>Sign Up For Our Emails</h4>
  <summary>
    <form>
      <label>Email Address</label>
      <input type="text" required="required" />
      <label>Delivery Preferences: </label>
      <select>
                        <option>Daily</option>
                        <option>Weekly</option>
                        <option>Monthly</option>
                    </select>
      <input type="submit" value="Sign-Up" />
    </form>
  </summary>
</body>

</html>

我已经为这个课程梳理了几天，但没有运气。我拥有他们在步骤中所做的一切，所以任何帮助都会令人惊讶：D

2 个答案:

答案 0 :(得分：0)

您必须定义这两个类：

.visible {
  display: block;
}
.notVisible {
  display: none;
}
编辑：OP编辑了问题并更改了CSS，现在我的答案已不适合了。

将你的for循环更改为：

for (var i = 0; i < figures.length; i++) {
    if (figures[i].className == 'visible') {
        figures[i].className = 'notVisible';
        pointer = i;
    }
}

＆＃13;
＆＃13; 
  var slideInterval = 3500;
function getFigures() {
    return document.getElementById('carousel').getElementsByTagName('figure');
}
function moveForward() {
    var pointer;
    var figures = getFigures();
    for (var i = 0; i < figures.length; i++) {
        if (figures[i].className == 'visible') {
            figures[i].className = 'notVisible';
            pointer = i;
        }
    }
    if (++pointer == figures.length) {
        pointer = 0;
    }
    figures[pointer].className = 'visible';
    setTimeout(moveForward, slideInterval);
}
function startPlayback() {    
    setTimeout(moveForward, slideInterval);
}
startPlayback();
＆＃13; 
@media not print {
  body {
    color: #635959;
  }
  header {
    background-color: #242323;
    color: #EFEFEF;
  }
  h3,
  article h4 {
    color: #8C1018;
  }
  article a {
    color: #314052;
  }
}

header h1 {
  font-size: 4em;
}

main figure>figcaption {
  font-size: 0.75em;
  font-style: italic;
}

main figure>figcaption::before {
  content: "Pictured above";
  font-weight: bold;
}

article>time {
  float: right;
  font-size: 0.75em;
  font-weight: lighter;
}

@media not print {
  main>h3 {
    font-size: 2em;
  }
}

header {
  padding: 20px 50px;
}

main {
  padding: 5px 10px
}

@font-face {
  font-family: 'News Cycle';
  src: url('../fonts/mod3_news_cycle.ttf') format('truetype');
}

body {
  font-family: 'News Cycle'
}

@font-face {
  font-family: 'Contrail One';
  src: url('../fonts/mod3_contrail_one.ttf');
}

header {
  font-family: 'Contrail One'
}

article {
  margin: 5px 0px;
  padding: 5px 5px;
  box-shadow: -1px -1px 6px #888888
}

@media print {
  header {
    padding: 0px;
  }
  article {
    box-shadow: none;
  }
  header h1 {
    font-size: 2em;
  }
  header h2 {
    display: none;
  }
}

section#carousel>figure>img {
  display: none;
  margin: 0px auto;
}

section#carousel>figure.visible>img {
  display: block;
  position: relative;
  overflow: hidden;
}

section#carousel>figure>figcaption {
  display: none;
}

section#carousel>figure.visible>figcaption {
  display: block;
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
}
＆＃13; 
       <body>
            <header>
            <h1>Contoso News</h1>
            <h2>On Time, On Topic</h2>
            </header>
            <section id="carousel">
                    <figure class="visible">
                        <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Natural Disaster" />
                        <figcaption>Hurricane Threatens to Touch Down on the East Coast This Weekend</figcaption>
                    </figure>
                    <figure>
                        <img src="https://www.w3schools.com/css/img_lights.jpg" alt="Health Records" />
                        <figcaption>Many Doctors are Moving to Digital Health Records This Year</figcaption>
                    </figure>
                </section>
            <main>
                <h3>Latest Articles</h3>
                <article>
                    <time datetime="16-01-2016">Friday, Jan 16</time>
                    <h4>International Story</h4>
                    <p> Curabitur pharetra luctus augue, non posuere orci tristique vel. Sed posuere nisi nec lacus ullamcorper, ac vulputate nisl consequat. Nullam sollicitudin nulla vel felis faucibus aliquam. Nunc sit amet velit orci. Proin sed orci fringilla, elementum felis condimentum, convallis augue. Aliquam erat volutpat. Mauris tempus nunc sit amet aliquet bibendum. Praesent vestibulum cursus ex, quis laoreet eros consectetur ac. Ut congue libero quis mauris egestas feugiat. Sed pharetra lorem et magna fringilla, a volutpat nibh sollicitudin. Nullam sagittis sollicitudin urna, sed sollicitudin mauris ornare id. <a href="#" Target="_blank">Read More...</a>
                     </p>
                </article>
                <article>
                    <time datetime="16-14-2016">Wednesday,Jan 14</time>
                        <h4>Finance Story</h4>
                        <p> 
                            Nullam tempor mi at libero elementum varius. Sed lobortis lacus feugiat est tristique, nec imperdiet turpis scelerisque. Ut sed urna malesuada, scelerisque dui sit amet, tempus mauris. Integer bibendum egestas urna, a bibendum sem gravida quis. Cras accumsan rhoncus vestibulum. Nam eu blandit leo. Integer at consectetur nunc, et tempus urna. Integer sit amet sollicitudin elit. Donec nec posuere erat. Sed vestibulum nisl neque, vitae tincidunt ex molestie quis. Nulla fringilla viverra turpis in volutpat. Cras vel orci quis velit efficitur ullamcorper sed eu ex.
                        </p>
                        <figure>
                            <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Debit Card with Chip" />
                            <figcaption>New Debit Cards with Chip-Based Security</figcaption>
                        </figure>
                        <p> 
                            Nullam vel ex nec lectus imperdiet luctus vitae vel nibh. Donec eleifend velit eros, eu efficitur justo molestie id. In egestas gravida lectus. Ut ipsum odio, suscipit sit amet molestie non, scelerisque sed mi. Aenean sed augue eu arcu faucibus molestie. Sed eget ante gravida, rhoncus velit eu, tempus quam. Sed fermentum at odio sed commodo. Fusce lobortis cursus purus, quis consequat est faucibus at. Etiam massa felis, sodales at sodales sed, iaculis quis arcu. <a href="#" target="_blank">Read More...</a>
                        </p>
                    </article>
                    <article>
                        <time datetime="16-14-2016">Wednesday, Jan 14</time>
                            <h4>Technology Story</h4>
                            <p>Morbi eget justo ut velit dapibus malesuada. Nunc elementum, neque quis convallis tempus, lacus ante tristique est, id porta tortor leo eget orci. Suspendisse hendrerit interdum lacus et condimentum. Mauris at ex dignissim, bibendum libero at, fermentum lectus. Maecenas porttitor purus quis augue interdum, eget malesuada neque placerat. Ut hendrerit risus in nibh elementum, quis vestibulum ipsum vulputate. Nulla facilisi. In consectetur et lacus vel tincidunt. Quisque feugiat ipsum et erat rhoncus efficitur. In in augue at enim tempor sollicitudin. <a href="#" Target="_blank">Read More...</a>
                            </p>
                        </article>
            </main>
            <h4>Sign Up For Our Emails</h4>
            <summary>
                <form>
                    <label>Email Address</label>
                    <input type="text" required="required" />
                    <label>Delivery Preferences: </label>
                    <select>
                        <option>Daily</option>
                        <option>Weekly</option>
                        <option>Monthly</option>
                    </select>
                    <input type="submit" value="Sign-Up" />
                </form>
            </summary>
        </body>
＆＃13;
＆＃13;
＆＃13;

jsfiddle

答案 1 :(得分：0)

问题在于javaScript的链接。我写'rel'就像我引用了一个css样式表

相关问题
最新问题