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

html構(gòu)造

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

cssスタイル

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

javaScript相互作用

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

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

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

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

demo

codepen

余分なコンテンツ

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

faq（faq）

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

以上がHTML、CSS、jQueryを使用してシンプルな畫像スライダーを作成する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。