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

html構(gòu)造

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

cssスタイル

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

javaScript相互作用

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

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

畫(huà)像が自動(dòng)的に回転することを確認(rèn)するには、一定の期間が経過(guò)した後、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)の畫(huà)像の総數(shù)よりも大きい場(chǎng)合、変數(shù)はゼロにリセットされることを意味します。このIFステートメントがない場(chǎng)合、畫(huà)像リストをループすることはできません。 IFステートメントの後、cycleItems関數(shù)を呼び出します。

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

demo

codepen

余分なコンテンツ

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

faq（faq）

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

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