HTML、CSS、jQueryを使用してシンプルな画像スライダーを作成する方法

写真のカルーセル、絵のスライダー、なぜあなたがそれらを呼び出すと、このモードはインターネット上で非常に目に見えるので、ほとんどすべてのウェブサイトがあります。あなたがWeb開発者である場合、あなたは自分でそれを構築することになるかもしれません。これを念頭に置いて、HTML、CSS、およびjQueryを使用してシンプルな画像スライダーを構築する方法を見てみましょう。

html構造

最初に、クラス名containerを持つコンテナ要素を作成します。コンテナには写真が含まれています。画像はdivタグで包まれているため、スライドショーをリンクに変換できるように、または画像以外のコンテンツをスライドショーとして使用できます。最初のコンテナdivには、スライダーの最初の画像がページが読み込まれたときに表示されることを確認するためのインラインスタイルがいくつかあります。また、ユーザーリクエストに基づいてスライドショーを手動でループするための2つのボタン要素もあります。

cssスタイル

ここでは、画像スライダー、コンテナdiv、および内部写真の幅を設定します。すべての容器divはdisplay: none;に設定されていることに注意する必要があります。そうでない場合、すべての写真が同時に表示されます。 JavaScriptを使用して1つのコンテナdivを設定すると、残りが隠されたままになります。 display: inline-block;

javaScript相互作用

最初に、いくつかの重要な変数を定義する必要があります。最初の変数は

で、0に設定されています。 2番目の変数はcurrentIndexです。これはitemsに設定されています。これにより、画像を含むコンテナのリストが返されます。 3番目の変数は$('.container div')で、変数の長さに設定されています。最後の変数は、画像スライダーのスライドの総数を示しています。 div itemAmt次に、「CycleItems」という関数を作成します。この関数は、他の画像が隠されたままであることを保証しながら、正しい画像を表示するために使用されます。この関数内では、itemsという名前の変数を作成します。この変数は

に設定されています。 jQueryによって提供される

メソッドは整数を取り、整数と一致するitemによって返された最初のアイテムを見つけます。したがって、$('.container div').eq(currentIndex)が0の場合、eqは画像スライダーの最初の画像コンテナに配置されます。私たちの$('.container div')関数の内部では、次に行うべきことは、すべての画像コンテナcurrentIndexを非表示にし、$('.container div').eq(currentIndex)をcycleItemsに設定することです。 div

画像が自動的に回転することを確認するには、一定の期間が経過した後、cycleItems関数を継続的に呼び出す方法を提供する必要があります。これを行い、autoSlideと呼ばれる別の変数を作成します。この変数は、3000ミリ秒または3秒の遅延を必要とするsetInterval関数を保存します。この関数内では、currentIndex変数に1を追加して、$('.container div').eq(currentIndex)が常に次のコンテナdivを参照します。次に、非常に重要な「if」ステートメントを定義します。このステートメントは、currentIndex変数がスライダー内の画像の総数よりも大きい場合、変数はゼロにリセットされることを意味します。このIFステートメントがない場合、画像リストをループすることはできません。 IFステートメントの後、cycleItems関数を呼び出します。

次に、以前の操作と次の操作を定義します。これらは、前のボタンと次のボタンをクリックすると何が起こるかを定義します。それらは、クリック時に自動ループをキャンセルすることを除いて、autoSlide関数と同様に動作します。スライドショーを手動でループするには、[次のボタン]ボタンをクリックするとcurrentIndex変数に1が追加され、前のボタンをクリックするとcurrentIndex変数が1減少します。

demo

codepen

でデモを表示します

余分なコンテンツ

CSSとHTMLのみを使用して構築された画像スライダーを表示するには、Zack Wallaceのデモをご覧ください！ （ここにリンクを挿入する必要があります。必要に応じてリンクを提供できます）

faq（faq）

（これは元のFAQパーツに従って書き換えて磨くことができるため、コンテンツの一貫性を維持しながら言語式がより自然で滑らかになります） 上記の手順を通じて、シンプルな画像スライダーを作成できます。 CSSスタイルとJavaScriptコードをさまざまな効果に対してニーズに合わせて調整できることを忘れないでください。

以上がHTML、CSS、jQueryを使用してシンプルな画像スライダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。