-2
私はこのコースをedXで行い、宿題ではJavaScriptを使用して自動カルーセル画像を作成しています。 EdXはすべてのステップを詳細に提供していますので、コピーして貼り付けて大丈夫だと思います。残念ながらそうではありませんでした。JavaScriptの画像カルーセルが正常に動作しない
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に
あなたはどんなエラーや予期しない結果を得ていますか？ – freginold
ねえ。だから、私はこれらすべてのものに新しいスーパーですが、私がコンソールに行くと、私はエラーを見ていません。ページをロードすると、イメージとキャプションが読み込まれますが、可視クラスが他のイメージに渡されず、最初のイメージに残ります – Mason