3つの簡単なステップでJavaScriptスライドショーを構築する方法

あなたが私たちのガイドを読んだならウェブサイトの作り方、あなたはあなたのスキルを向上させるために次に何をすべきか疑問に思うかもしれません。写真のスライドショーを作成することは驚くほど簡単な作業であり、プログラミングの仕事を得るのに必要な貴重なスキルを教えることができます。

今日は、JavaScriptスライドショーを最初から作成する方法を紹介します。さっそく飛び込もう！

前提条件

コーディングを始める前に、いくつかのことを知っておく必要があります。選択した適切なWebブラウザとテキストエディタと一緒に（私はお勧めします崇高なテキスト）、あなたはいくつかの経験が必要になります HTML 、 CSS 、 JavaScript 、と jQuery 。

スキルにそれほど自信がない場合は、ドキュメントオブジェクトモデルの使用に関するガイドと、CSSを学習するためのこれらのヒントを必ずお読みください。 JavaScriptに自信があるが、これまでjQueryを使用したことがない場合は、jQueryの基本ガイドを確認してください。

1.はじめに

このスライドショーには、いくつかの機能が必要です。

画像のサポート
画像を変更するためのコントロール
テキストキャプション
自動モード

機能の簡単なリストのようです。自動モードでは、画像がシーケンス内の次の画像に自動的に進みます。コードを書く前に私が行った大まかなスケッチは次のとおりです。

なぜ計画を立てるのが面倒なのか疑問に思っている場合は、歴史上最悪のプログラミングミスを見てください。このプロジェクトで人が殺されることはありませんが、大まかなスケッチであっても、より大きなコードで作業する前に、コードと計画手順をしっかりと理解することが重要です。

開始するために必要な最初のHTMLは次のとおりです。これを次のような適切な名前のファイルに保存します index.html ：

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

コードは次のようになります。

ちょっとゴミですね。改善する前に分解しましょう。

このコードには「標準」が含まれています HTML 、頭、 スタイル 、脚本、と体タグ。これらのパーツは、どのWebサイトにも不可欠なコンポーネントです。 JQuery Google CDNを介して含まれています-これまでのところ、ユニークで特別なものはありません。

本体の中にはIDが showContainer 。これは、スライドショーを保存するためのラッパーまたは外部コンテナーです。これは後でCSSで改善します。このコンテナ内には、それぞれ同じ目的の3つのコードブロックがあります。

親クラスは、次のクラス名で定義されます。 imageContainer ：

これは、単一のスライドを保存するために使用されます。画像とキャプションは、このコンテナ内に保存されます。各コンテナには、文字で構成される一意のIDがあります の中に_ と番号。各コンテナには、1から3までの異なる番号があります。

最後のステップとして、画像が参照され、キャプションがdiv内に保存されます。 キャプション クラス：

Dog

数値のファイル名で画像を作成し、というフォルダに保存しました画像。一致するようにHTMLを更新すれば、好きなように呼び出すことができます。

スライドショーに多かれ少なかれ画像を入れたい場合は、コードのブロックをコピーして貼り付けるか、削除します。 imageContainer クラス、必要に応じてファイル名とIDを更新することを忘れないでください。

最後に、ナビゲーションボタンが作成されます。これらにより、ユーザーは画像をナビゲートできます。

 ❮  
 ❯

これらは HTMLエンティティ コードは、アイコンフォントの動作と同じように、順方向矢印と逆方向矢印を表示するために使用されます。

2.CSS

コア構造が整ったので、今度はそれを見てみましょう かわいい 。この新しいコードの後は次のようになります。

このCSSを スタイル タグ：

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

今はずっと良く見えますよね？コードを見てみましょう。

すべてのサンプル画像を使用しています 670 x503ピクセル 、したがって、このスライドショーは主にそのサイズの画像を中心に設計されています。別のサイズの画像を使用する場合は、CSSを適切に調整する必要があります。画像のサイズを同じサイズに変更することをお勧めします。サイズが異なると、スタイルの問題が発生します。

多くの このCSSの内容は自明です。画像を保存するコンテナのサイズを定義し、すべてを中央揃えにし、フォントを指定し、ボタンとテキストの色を指定するコードがあります。これまでに出会ったことがないかもしれないいくつかのスタイルがあります：

カーソル：ポインタ -これにより、ボタンの上にカーソルを移動すると、カーソルが矢印から指差しに変わります。
不透明度：0.65 -これにより、ボタンの透明度が向上します。
ユーザー選択：なし -これにより、ボタンのテキストを誤って強調表示することがなくなります。

このコードのほとんどの結果は、ボタンで確認できます。

ここで最も複雑な部分は、この奇妙な外観の線です。

.imageContainer:not(:first-child) {

非常に珍しいように見えるかもしれませんが、それはかなり自明です。

まず、それはすべての要素を対象としています imageContainer クラス。 NS ：いいえ（） 構文では、角かっこ内の要素は次のようになります。除外このスタイルから。最後に、 ：第一子 構文は、このCSSが名前に一致するすべての要素をターゲットにする必要があることを示しています しかし 最初の要素は無視してください。この理由は単純です。これはスライドショーであるため、一度に1つの画像のみが必要です。このCSSは、最初の画像を除くすべての画像を非表示にします。

3.JavaScript

パズルの最後のピースはJavaScriptです。これは、実際にスライドショーを正しく機能させるためのロジックです。

このコードをあなたの脚本鬼ごっこ：

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 decreaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 $('#next').on('click', function(){  
 // Change to the next image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 increaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 var currentImage = 1;  
 var totalImages = 3;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

直感に反するように思えるかもしれませんが、コードの最初のブロックをスキップして、途中からコードの説明に直接ジャンプします。心配しないでください。すべてのコードを説明します。

2つの変数を定義する必要があります。（JavaScriptで変数を定義する方法は次のとおりです。）これらの変数は、スライドショーの主な構成変数と考えることができます。

var currentImage = 1;  
var totalImages = 3;

これらは、スライドショー内の画像の総数と、開始する画像の数を格納します。より多くの画像がある場合は、単に変更します totalImages あなたが持っている画像の総数に可変です。

2つの機能 増加画像 と 減少画像 前進または後退 currentImage 変数。この変数が1より低くなるか、またはより高くなる必要があります totalImages 、1つにリセットされるか totalImages 。これにより、スライドショーが最後に到達するとループします。

最初のコードに戻ります。このコードは、次および前のボタンを「ターゲット」にします。各ボタンをクリックすると、適切なボタンが呼び出されます増加また下降メソッド。完了すると、画面上の画像がフェードアウトし、新しい画像がフェードインします（ currentImage 変数）。

NS ストップ（） メソッドはjQueryに組み込まれています。これにより、保留中のイベントがキャンセルされます。これにより、各ボタンの押下がスムーズになり、マウスに少し夢中になった場合に実行を待機しているボタンを100回押す必要がなくなります。 NS フェードイン（1） と fadeOut（1） メソッドは、必要に応じて画像をフェードインまたはフェードアウトします。数値は、フェードの期間をミリ秒単位で指定します。これを500などの大きな数値に変更してみてください。数値が大きいほど、遷移時間が長くなります。ただし、行き過ぎてしまうと、画像の変化の間に奇妙なイベントや「ちらつき」が見られるようになる可能性があります。動作中のスライドショーは次のとおりです。

自動前進

このスライドショーは今ではかなり見栄えがしますが、最後にもう1つ必要な仕上げがあります。自動進行は、このスライドショーを本当に輝かせる機能です。設定した時間が経過すると、各画像は自動的に次の画像に進みます。ただし、ユーザーは引き続き前方または後方にナビゲートできます。

Windows10のアップグレードに十分なディスク容量がありません

これはjQueryの簡単な仕事です。コードを毎回実行するには、タイマーを作成する必要があります NS 秒。ただし、新しいコードを作成するよりも、次の画像ボタンの「クリック」をエミュレートし、既存のコードにすべての作業を任せるのが最も簡単な方法です。

これがあなたが必要とする新しいJavaScriptです-これを後に追加してください 減少画像 関数：

window.setInterval(function() {  
 $('#previous').click();  
}, 2500);

ここでは多くのことが起こっていません。 NS window.setInterval メソッドは、最後に指定された時間で定義されているように、コードの一部を定期的に実行します。時間 2500 （ミリ秒単位）は、このスライドショーが2.5秒ごとに進むことを意味します。数値が小さいほど、各画像がより速いペースで進みます。 NS クリック メソッドは、ユーザーがマウスでボタンをクリックしたかのように、ボタンをトリガーしてコードを実行します。

次のJavaScriptチャレンジの準備ができたら、GatsbyJSのような静的なWebサイトビルダー、またはVueのようなフロントエンドフレームワークを使用してWebサイトを構築してみてください。 Rubyの学習者であれば、Jekyllもオプションです。 JekyllとGatsbyJSがお互いにどのように戦うかは次のとおりです。

画像クレジット：Shutterstock.com経由のTharanat Sardsri

共有共有つぶやき Eメール オーディオブックを無料でダウンロードするための8つの最高のウェブサイト

オーディオブックは素晴らしい娯楽の源であり、消化がはるかに簡単です。ここにあなたがそれらを無料でダウンロードすることができる8つの最高のウェブサイトがあります。

次を読む 関連トピック

プログラミング
JavaScript
ウェブデザイン

著者について ジョーコバーン（136件の記事が公開されました）

Joeは、英国のリンカーン大学でコンピュータサイエンスを卒業しています。彼はプロのソフトウェア開発者であり、ドローンを飛ばしたり音楽を書いたりしていないときは、写真を撮ったりビデオを制作したりしていることがよくあります。

ジョーコバーンのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください