javascriptのスライドショーの作り方（簡単な3ステップ

今日は、javascriptのスライドショーをゼロから作る方法を紹介します - 始めましょう！...

ウェブサイト**のガイドをお読みになった方は、次に何をすれば自分のスキルを向上させられるか悩んでいるかもしれませんね。**写真のスライドショーは、プログラミングの仕事に必要な貴重なスキルを学ぶことができる、非常にシンプルなタスクです。

今日は、ゼロからJavaScriptのスライドショーを構築する方法を紹介します。

前提条件

コードを書き始める前に知っておかなければならないことがいくつかあります。ウェブブラウザとテキストエディタ（Sublime textをお勧めします）の他に、HTML、CSS、JavaScript、jQueryの経験が必要です。

また、JavaScriptに自信はあるが、jQueryを使ったことがないという方は、jQueryの基本ガイドをご覧ください。

1 はじめに

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

サポート画像
画像を変更するためのコントロール
テキストタイトル
オートマチックモード

これは単純な機能の羅列に見える。オートモードでは、自動的に次の画像に進みます。以下は、コードを書く前に描いたラフスケッチです。

なぜわざわざ計画を立てる必要があるのかを知りたいのであれば、歴史上最悪のプログラミングの失敗をご覧ください。このプロジェクトで人が死ぬことはありませんが、大きなコードを書く前に、ラフスケッチでもいいので、コードと企画をしっかり理解することが肝要です。

これをindex.htmlなど適当な名前をつけてファイルに保存します。

<!DOCTYPE html><html> <head> <style> </style> <title>MUO Slideshow</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> </script> </head> <body> <div id="showContainer"> <div class="imageContainer" id="im_1"> <img src="Images/1.jpg" /> <div class="caption"> Windmill </div> </div> <div class="imageContainer" id="im_2"> <img src="Images/2.jpg" /> <div class="caption"> Plant </div> </div> <div class="imageContainer" id="im_3"> <img src="Images/3.jpg" /> <div class="caption"> Dog </div> </div> <div class="navButton" id="previous">❮</div> <div class="navButton" id="next">❯</div> </div> </body></html>

コードは以下の通りです。

ちょっとくだらないですね。まず壊して、それから改善する。

このコードには、「標準的な」HTML、head、style、script、bodyタグが含まれています。JQueryはGoogleCDN経由で搭載しており、今のところユニークで特別なものはない。

メインボディの中には、showContainerというIDを持つdivがあります。これは、スライドショーを格納するためのラッパーまたは外部コンテナです。これは後でCSSを使って改良する。このコンテナの中には、3つのコードがあり、それぞれが同じような目的をもっています。

imageContainer として定義された親クラスのクラス名。

スライドを格納するために使用されます。画像とキャプションはこのコンテナに格納されます。各コンテナは一意のIDを持ち、これは文字イメージと数字で構成される。それぞれの容器には、1から3までの異なる数字が書かれています。

最後のステップでは、画像を参照し、キャプションをcaptionクラスでdivに格納します。

画像は数字のファイル名で作成し、imagesというフォルダに保存しました。HTMLをそれに合わせて更新すれば、何でも呼び出すことができます。

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

最後に、ナビゲーションボタンを作成します。このボタンによって、ユーザーは画像内を移動することができます。

これらのHTMLエンティティコードは、アイコンフォントと同じように、前進と後退の矢印を表示するために使用されます。

2css

さて、コアとなる構造ができたので、次は見た目を美しくする番です。新しいコードを加えた後の外観は以下の通りです。

スタイルタグの間にこの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 butt*** 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×503ピクセルなので、このサイズの画像を中心にスライドショーをデザインしています。異なるサイズの画像を使用したい場合は、CSSを適切に調整する必要があります。また、画像のサイズも合わせて変更することをお勧めします。異なるサイズの画像は、スタイリングの問題を引き起こす可能性があります。

ほとんどのCSSは自明なものです。画像を格納するコンテナのサイズ、すべてのコンテンツの中央揃え、フォントの指定、ボタンとテキストの色などを定義するコードがあります。今まで見たことのないようなスタイルがいくつもあります。

カーソル：ポインター - カーソルをボタンの上に移動させると、カーソルが矢印から人差し指に変わります。
不透明度：0.65 - ボタンの透明度が上がります。
user select:none - ボタン上のテキストを誤ってハイライトすることがないようにします。

ボタンでほとんどのコードの結果を見ることができます。

ここで最も複雑なのは、この奇妙な行です。

.imageContainer:not(:first-child) {

珍しいと思われるかもしれませんが、かなり自明なことなのです。

まず、imageContainerクラスを持つすべての要素を対象とします。構文：not()は、大括弧内の任意の要素をこのスタイルから除外することを示す。最後に、最初の構文は、このCSSは名前が一致するすべての要素を対象とし、最初の要素を無視することを宣言しています。その理由は簡単です。スライドショーなので、一度に必要な画像は1枚だけです。このCSSは、最初のCSS以外のすべての画像を非表示にします。

III. javascript

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

このコードをscriptタグに追加してください。

$(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 **aller than 1 */ --currentImage; if(currentImage < 1) { currentImage = totalImages; } }});

直感に反するかもしれませんが、最初のコードのブロックを飛ばして、途中からストレートにコードの説明を始めます - 心配しないでください、すべてのコードを説明しましたよ。

2つの変数を定義する必要があります。(JavaScriptで変数を定義する方法はこちら)。これらの変数は、スライドの主な設定変数と見なすことができます。

var currentImage = 1;var totalImages = 3;

スライドショーの総画像数と、再生を開始する画像数が格納されます。さらに画像がある場合は、totalImages変数を画像の総数に変更するだけでよい。

この2つの関数は、現在の画像変数の前方または後方に画像を増加させ、画像を減少させるものである。この変数が1以下またはtotalImages以上の場合、1またはtotalImagesにリセットされます。これにより、スライドが最後に到達したときにループすることが保証されます。

コードの冒頭に戻る。このコードは、次と前のボタンを「ターゲット」にしています。各ボタンがクリックされると、適切なインクリメント/デクリメントメソッドが呼び出されます。それが終わると、単に画面上の画像をフェードアウトさせ、新しい画像（currentImage変数で定義されたもの）をフェードインさせるだけである。

stop()メソッドは、jQueryに組み込まれています。これにより、保留中のイベントはすべてキャンセルされます。fadeIn(1) と fadeOut(1) メソッドは、必要に応じて画像をフェードインまたはフェードアウトさせることができます。フェードイン、フェードアウトの継続時間（ミリ秒）を数値で指定する。これを500など大きな数値に変えてみてください。数値が大きくなるほど、移行時間が長くなります。ただし、あまりやりすぎると、変な現象が起きたり、画像が切り替わるときに「ちらつき」が出たりすることがあります。以下、スライドショーでご紹介します。

自動推進

このスライドは、今はとてもいい感じですが、最後にもう一回タッチアップする必要があります。オートアドバンスは、このスライドをより輝かせる機能です。設定した時間が経過すると、各画像は自動的に次の画像に進みます。ただし、前進・後退の操作は可能です。

jQueryを使えば、これは簡単な作業です。X秒ごとにコードが実行されるように、タイマーを作成する必要があります。しかし、新しいコードを書くよりも、最も簡単な方法は、次の画像ボタンを「クリック」することをシミュレートして、既存のコードにすべての作業をさせることです。

decreaseImage関数の後に、次のようにJavaScriptを追加してください。

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

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

もし、あなたが次のJavaScriptに挑戦する準備ができているなら、Gat**yJSのような静的ウェブサイトビルダーやVueのようなフロントエンドフレームワークを使ってウェブサイトを構築してみてください。Rubyの学習者であれば、Jekyllも選択肢の一つです。ジキルとギャツビーはこんな感じでした。

画像引用元：Tharanat Sardsri via Shutterstock.com ウェブサイト

2021-03-13 17:20 に公開
閲覧 ( 22 )
分類：プログラミング