私は自分で3つの写真のカルーセルを書きました。 1つは単純なネイティブJSで実装されており、アニメーション効果はありません。もう1つはjQueryと組み合わせて実装され、内外に切り替えられます。今、私は自分のブログや個人的なウェブサイトでよりクールなものを作りたいと思っています。その時点で自分の作品を表示できます。 MOOCでしばらく買い物をした後、Carousel JQueryプラグインコースがあることがわかりました。これは少しクールだったので、ネイティブJSでカプセル化することを考えました。それをした後にのみ、私が思ったほど簡単ではありませんでした。 。 。もうそれについて話さないでください、実装プロセスを説明しましょう。
2。効果
私のサーバーはまだインストールされていないためです。オンラインデモンストレーション（orz ...）はありませんので、レンダリングのみを行うことができます。
おおよその効果はまだ写真から見ることができるので、あまり言いません。実際のコード効果を確認したい場合は、GitHubダウンロードコードへようこそ。私のgithubプロジェクトで私にスターを与えることを忘れないでください^_^
iii。実装プロセス
HTML構造
<div data-setting = '{"width"：1000、 "height"：400、 "carrouselwidth"：750、 "carrouselheight"：400、 "scale"：0.9、 "verticalAlign"： "middle"}'> <div> </div> <ul> <li> <a href = " </li> <li> <a href = "＃"> <img src = "img/2.jpg"> </a> </li> <li> <a href = "＃"> <img src = "img/2.jpg"> </a> </li> <li> <a href = " <li> <a href = "＃"> <img src = "img/4.jpg"> </a> </li> <li> <a href = "＃"> <img src = "img/5.jpg"> </a> </ul> <div> </div> div>この構造は、一般的なカルーセルのHTMLコード構造と同じです。わずかな違いは、いくつかのカルーセル効果パラメーターを含むメインカルーセルDivにデータ設定プロパティがあることです。パラメーターの特定の重要性については、後で説明します。
CSS部品のコードは投稿されません。最も重要なことは、要素の絶対的な位置に注意を払うことです。レンダリングからわかるように、各画像の位置とサイズは異なるため、これらはJSを介して制御されるため、絶対的な位置付けが必要です。 JSの実装プロセスに焦点を当てましょう。
JS実装プロセス
JSのいくつかの重要なステップについて話しましょう。これらの手順を実行した後、困難はないはずです。
defaultパラメーター
パッケージプラグインであるため、構成する必要があるパラメーターには間違いなくいくつかのデフォルト値があります。このプラグインでは、次のパラメーターは主に次のようです。
幅：1000、//スライド領域の幅
高さ：400、//スライド領域の高さ
carrouselwidth：700、//スライドの最初のフレームの幅
currouselheight：400、//スライドの最初のフレームの高さ
スケール：0.9、//スケール関係を記録します。たとえば、2番目の画像の幅と高さは、表示されたときの最初の画像の幅と高さです。
オートプレイ：true、//自動的に再生されますか？
タイムスパン：3000、//自動再生時間間隔
verticalAlign： 'Middle' //画像アライメントには、3つの方法があります。上/中/下、デフォルトは中央です
objectオブジェクトをカプセル化します
Webサイトは複数の場所で同じCarouselプラグインを使用する可能性があるため、パッケージングが重要です。このオブジェクトを定義した後、オブジェクトの初期化方法を定義すると、複数のオブジェクトを作成できます。その中のすべてのクラスの同じDOMを渡すだけです。したがって、私の初期化方法は次のとおりです。
carousel.init = function（currusels）{var _this = this; //ノデリストをアレイに変換しますvar cals = toarray（currusels）; <br> /*ネイティブJSがすべてのクラスを取得するため、あなたが得るものはノデリストであり、クラスアレイです。配列メソッドを使用する場合は、実際の配列に変換する必要があります。ここでToArrayは変換方法です。 */ cals.foreach（function（item、index、array）{new _this（item）;}）; }このようにして、私がwindow.onloadにいるとき、私はcarrousel.init（document.queryselectorall（'。carousel-main '））に電話します）;これにより、複数のカルーセルを作成できます！
最初のフレームの位置パラメーターを発明します
最初のフレームの後のすべてのフレームの関連パラメーターは、最初のフレームを参照して定義されるため、最初のフレームウェルを定義することが重要です。
setValue：function（）{this.carrousel.style.width = this.settings.width+'px'; this.carrousel.tyle.height = this.settings.height+'px'; /*左と左のボタン設定、ここでは、左と右のボタンの後の領域が最初のフレームの幅から差し引かれます。 z-indexは最初のフレームを除くすべての写真よりも高く、写真は左右に配置されるため、z-indexの値は写真の半分です。 */ var btnw =（this.settings.width-this.settings.carouselwidth）/ 2; this.prebtn.style.width = btnw+'px'; this.prebtn.style.height = this.settings.height+'px'; this.prebtn.style.zindex = math.ceil（this.carrouseLitems.length/2）; this.nextbtn.style.width = btnw+'px'; this.nextbtn.style.height = this.settings.height+'px'; this.nextbtn.style.zindex = math.ceil（this.carrouseLitems.length/2）; //最初のフレーム関連設定this.carrouselfir.style.left = btnw+'px'; this.carselfir.style.top = this.setCarrouselAlign（this.settings.carselheight）+'px'; this.carrouselfir.style.width = this.settings.carselwidth+'px'; this.carselfir.tyle.height = this.settings.carrouselheight+'px'; this.carrouselfir.tyle.zindex = math.floor（this.carrouseLitems.length/2）;}、ここで、新しいオブジェクトが使用されたら、DOMノードに移動してデータセットパラメーターを取得し、デフォルトのパラメーター構成を更新します。ここに注意する場所があります。パラメーターを取得するときにパラメーターを取得するときに値を割り当てることでデフォルトのパラメーターを直接更新することはできません。これは、ユーザーがパラメーターを構成する場合、すべてのパラメーターを1回構成できないためです。値が直接割り当てられ、ユーザーがたまたま構成されている場合、パラメーターは失われます。ここでは、パラメーターを更新するために、jqueryの$ extendメソッドと同様のオブジェクト拡張メソッドを書きました。詳細はリストされません。興味があればダウンロードできます。
他の画像の位置設定
ここの写真は実際には、最初の写真が2つの左右の写真に分割され、左側の画像位置と右側の写真の位置が異なるため、個別に構成する必要があります。
//右側に画像の位置関係を設定しますvar rightIndex = level; rightslice.foreach（item、index、array）{rightindex--; var i = index; rw = rw*currouselself.settings.scale;右側のZインデックスは、一般的な数の写真を使用して徐々に減少する可能性があります。 //ここでのギャップ計算方法は次のとおりです。最初のフレーム幅を減算し、2を分割し、左または右の項目の写真の数を除算します。Style.Left=（constoffset+（++ index）*GAP-RW）+'px'; item.style.top = currouselself.setCarrouselAlign（rh）+'px';}）;左側の設定方法は似ており、よりシンプルなので、詳細は説明しません。
rotation回転中にすべての写真の位置サイズを調整します
このステップは非常に重要です。右のボタンの次のボタンをクリックすると、左回転があり、左のボタンの前のボタンをクリックすると右の回転があります。この時点では、すべての写真をリングと見なし、1回クリックし、位置を変更し、回転を完了するだけです。具体的には、左の回転が回転したときに、2番目の画像のパラメーターを最初の画像に等しくします。3番目の画像は2番目の画像に等しくなり、最後の写真は最初の写真に等しいものにします。右回転する場合は、最初の画像のパラメーターを2番目の画像に等しくします。2番目の画像のパラメーターは、3番目の画像に等しくなり、最後の画像のパラメーターを最初の画像に等しくします。
ここで左のローテーションについて話しましょう
if（dir == 'left'）{toArray（this.carsolitems）.foreach（function（item、index、array）{var pre; if（index == 0）{//最初のpre = _this.carrousellat; //最後のvar widthに等しい最初のpreを保存する= offsetwidth; zIndex=pre.style.zIndex; var opa=pre.style.opacity; var top=pre.style.top; var left=pre.style.left; }else{ var width = tempWidth; var height = tempHeight; var zIndex = tempZIndex; var opa = tempOpacity; var top = tempTop; var left = tempLeft; } //Note here, because the second picture最初の写真を指しますitele.width+'px =' px '; function_this.rotateflag = true;};}アニメーションをあまり使用しないと、ここでの回転は硬く表示されます。しかし、ネイティブJSにはアニメーション機能がありません。ここでは、自分で模倣されたアニメーション関数を書きました。原則は、DOMの元のスタイル値を取得し、新しく渡された値と比較することです。いくつかの方法を使用して速度を定義します。ここでの私の速度は、18の差を分割することです。ただし、タイマーを定義し、jQueryソースコードの時間間隔を参照して13ミリ秒ごとに実行します。次に、元のスタイルの値が着信値に追加されるたびにタイマーは明確になります。詳細については、こちらをご覧ください。
さて、重要なポイントはほぼ同じです。これらのプロセスを理解すれば簡単なはずです！
4。概要と反射
要約：
個人的には、これは比較的わかりやすいプラグインだと思います。 JQueryと組み合わせてそれを行うのは非常に簡単です。ただし、オリジナルから書くと、まだ少しスムーズに感じられます。カスタムアニメーションは、jQueryによってカプセル化されたアニメーションほど良くないということです。
また、画像を左側と右側の両側に均等に分割する必要があるため、偶数の写真については、ここで使用される方法は、最初の画像をクローンし、最後に追加して奇数を形成することです。
考える：
バグがある場合、回転フラグフラグを定義して、現時点で回転できるかどうかを判断することを意味します。押したとき、RotateFlagをFalseに設定し、アニメーションが終了した後にRotateFlagをTrueに設定しますが、効果は明らかではないようです。関連するマスターが私にアドバイスを与えることができ、誰もが一緒に進歩することを願っています。
上記は、この記事のコンテンツ全体です。その他のコンテンツについては、次を参照してください。JavaScriptの概要Carousel Effects。読んでくれてありがとう。