はじめに
このレッスンは、順序付けられていないリストをカルーセルに変えるのに役立ちます。 難しくはありませんが、htmlファイルを正しく作成し、その中にCSSとJavaScriptを含めて、すべてがどのように機能するかを確認できることを前提としています。
準備。
コードを調べ始める前に、すべてのスクリプトをダウンロードして接続する必要があります。 あなたがする必要があります：
すべてのファイルを1つのフォルダーに保存しましょう。 タイプに応じてファイルを配布する場合は、例のパスを置き換えることを忘れないでください！
HTMLページの準備。
体内に次のコードを追加します。
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
スクリプト。
必要なスクリプトを接続します。 これを行うには、次のコードをbodyタグの一番下に追加するだけです（フレームワークサイトに記述されているため、それらをheadに接続することをお勧めします）。
<script src="jquery.js"></script> <script src="jquery.roundabout.js"></script>
カルーセル。
接続されたスクリプトの下に、次のコードを追加します。
<script> $(document).ready(function() { $('ul').roundabout(); }); </script>
ここで何が起こっていますか？
ドキュメントの読み込みの最後に、jQueryのイベントを作成します。 htmlページがロードされるとすぐに、ブラウザーはすべての要素を反映し、関数が起動されます。
jQueryを使用する関数内で、ulタグを持つすべての要素を選択し、それらにラウンドアバウト関数を適用します。 htmlコードを保存して、ブラウザーで実行してみてください。 カルーセルのようなものが見えるはずです。
CSS
カルーセルの外観を良くするには、CSSの調整が必要です。 CSSファイルは接続されておらず、ここでは必要ありません。それほど大きなドキュメントではありません。次のコードをheadタグに貼り付けてください。
<style> .roundabout-holder { list-style: none; padding: 0; margin: 0; height: 5em; width: 5em; } .roundabout-moveable-item { height: 4em; width: 4em; cursor: pointer; background-color: #ccc; border: 1px solid #999; } .roundabout-in-focus { cursor: auto; } </style>
.roundabout-holderクラスは、単独でulに追加されます。 これは、リストマーカーを削除し、カルーセルに選択したサイズを設定するために必要です。
.roundabout-moveable-itemクラスはliにのみ追加されます。 li要素はサイズを取り、マウスオーバーすると、マウスポインターが「手」に変わります。
.roundabout-in-focusクラスは、要素が前面（フォーカス）にあるときにliに追加されます。 そのような要素には、元の要素へのポインタを返します。
CSS設定。
CSSを使用してカルーセルを柔軟にカスタマイズすることにより、カルーセルを変更することは科学というよりも芸術になります。 .roundabout-holderクラスの幅を10emに変更してみてください。 要素がどのように満たされるかを見てください？ カルーセルは、割り当てられた領域全体を埋めるために可能なすべてのことを行いますが、一部の要素は、移動すると確立された境界を超えます。
これらのカルーセル設定をいじってみてください。変更が自発的になればなるほど、カルーセルが楽しくなります（クレイジーという言葉は元の言葉で使用されます）。
パラメーターの設定。
その前に、定義済みのパラメーターを使用して最も単純なカルーセルを作成しましたが、実際には、関数を呼び出すときに設定を使用してオブジェクトを渡すことができるため、カルーセルをより柔軟にカスタマイズできます。
これは、次のコードを使用して行われます。
<script> $(document).ready(function() { $('ul').roundabout({ // }); }); </script>
利用可能なオプション。
実際、これらのオプションは多数ありますが、ここでは最も興味深いものの1つを使用してみます。
HTMLコードに追加します。
<a href=”#” class=”.next”></a>
ロータリーでは、オブジェクトの次のプロパティを渡します。
btnNext：「.next」
このプロパティは、セレクターをjQuery文字列として渡します。 クラス.nextのリンクをクリックすると、カルーセルのオブジェクトを左から右に切り替えることができます。 逆btnPrevプロパティを使用して練習し、カルーセル要素を逆の順序で切り替えるオブジェクトを定義します。 オブジェクトの複数のパラメーターを渡す場合は、コンマで区切ってリストします。 私の意見では、興味深い特性の1つは、真の値と偽の値を持つ自動再生です。 スライドの自動切り替えを担当します。 自動再生を設定する場合、durationプロパティが必要になり、ミリ秒単位で測定され、次のスライドに切り替えるまでに経過する必要がある時間を設定します。
プロパティの完全なリストは、 ここで見ることができます 。
最後までレッスンを読んでくれてありがとう！