javascript(ジャバスクリプト)で円形のスライダーを自作してみました。【javascript circleslider】

javascript(jquery)を使って円形のスライダー(circleslider)を自作したので、コードを掲載し記事にしておきたいと思います。360°で回転し入れ替わる円形のスライダーと普通のスライダーカルーセルを組み合わせてみました。ランディングページやプロモーションサイトなどでご使用して頂ければと思います。制作する過程でTiny Circlesliderを参考にさせて頂きました。

完成形は以下のようになります。

js circle slider demo img

*CYBER JAPAN関係者様。画像の仕様等問題があればご連絡下さい。すぐに差し替えます。

DEMO

js circle sider 目次

  1. circleslider javascriptとhtml全コード
  2. slider用ドキュメントをcreateDocumentFragment()を使用して実装しする
  3. circleslider(円形スライダー)実装する
  4. slider carouselを実装しcirclesliderと同期させる
  5. circlesliderのスタイリングをcssで設定する
  6. circlesliderのレスポンシブ対応について

circleslider javascriptとhtml全コード

始めに円形sliderのjavascriptとhtmlをすべて提示して少しずつ抜き取りながら解説していきたいと思います。

circlesiderの全コードは以下になります。

js

html

slider用ドキュメントをcreateDocumentFragment()を使用して実装する

提示したhtml文書を確認して頂くとネイティブの状態だと#area以外は記述されていません。

この中にcirclesliderで必要な要素をjavascriptのcreateDocumentFragment()を使用して追加していきます。

createDocumentFragment()を使用して形成されるDOMノードは小さなDOMツリーの断片としてメモリー上に置かれ、本来のDOMツリーの一部にはならないため、ページ全体のリフロー(reflow : 要素の位置と構造の計算)を発生させないようです。結果パフォーマンスの向上に繋がりやすくなるようです。

今回作成するsliderやjavascriptゲームなどDOMを頻繁に呼び続けるようなケースでは、何をするかにもよりますが使用した方が良いケースが多いと思います。

先に提示したすべてのcirclesliderのjavascriptコードからdocument形成に必要なjavascriptを一部抜きっとって示します。

js

上記javascriptで形成されたhtml文書が以下になります。#areaの中に円形のスライダ-、通常のスライダーカルーセルに必要なhtmlやstyleが追加されました。

html

createDocumentFragment()を使用して追加したhtmlドキュメントについて各々で簡単に解説していきたいと思います。

ドキュメント形成にはjavascript内のmakeClone()、drawCreates(selector)、setDots()の3つのメソッドを使用しています。

makecloneメソッドでcirclesliderで必要なパーツの一番外側のドキュメントをdocument.createElement()を使って3つ作成し、上から順に「’viewport’, ‘round’, ‘thum’」のクラス名を追加します。

drawCreateメソッドでスライダ-カル-セルで使用するimg要素とimg要素をラップするli要素を、使用する画像の数だけdocument.createElement()を使って作成し、img要素に対してsetAttribute(‘src’)でsrc属性を追加して、画像へのパスを設定します。

setDotsメソッドでスライダ-カルーセルで使用する画像分だけサークルスライダーの要素を作成します(ここでは5個)。

サ-クルスライダ-の要素各々の円に対する角度の比をangleに設定します。ここで少し細工が必要になります。-(マイナス)を追加することでサ-クルスライダ-の左右を反転します。+180することで上下を反転します。一度外して確認して頂ければと思います。

各々の(x,y)の値を取得してtopとleftに設定します。

dotsとangle_startの各配列に必要なデータを取得しておきます。これはドキュメント形成には無関係でスライダ-で使用しますが、setDotsメソッドに組み込んであるので一応入れておきます。このデ-タを確保しておくと確認作業や何か別途で機能を追加したい時などに役に立ちます。

javascriptのcreateDocumentFragment()を使用してのドキュメント実装解説は以上になります。次に本題のcirclesliderの実装の解説に入りたいと思います。

circleslider(円形スライダー)を実装する

createDocumentFragment()でのドキュメント形成の解説と同じようにcircleslider(円形スライダー)のメインの実装に必要なコードを一部抜き出して示します。

js

circleslide(円形スライダー)を動かすのに必要なメソッドはcircle_slide()、move()、set_timer()、start_timer()の4つ

まずcircle_slide() 1回の呼び出しで5つの円形スライダーが1°づつ移動します。1°移動した時の(x,y)の座標を取得してcssのtransformプロパティーを使用して回転させます。

ここでの一つのポイントがモジュロ演算です。モジュロ演算は被除数を除数で割った余りを返します。(angle_start[index].angle – settings.start)の値が1081だとしてもiに入る数値は360で割った余りの1です。iには除数以上の数値は入りません。ここではiには360以上の数値は入らないことになります。

二つ目のポイントはangle_start[index].angleです。setDotsメソッドで取得した連想配列のangleには円形スライダー5個のそれぞれのデフォルトの角度の値が入っています。circle_slide() 1回の呼び出しでそれぞれに1°づつ足されます。結果それぞれの(x,y)座標の値が変化します。

set_timer()関数内ではcircle_slide()関数を10ミリ秒ごとにslidesAngle回呼び出しています。slidesAngleはここでは360/5なので72になります。set_timer()1回の呼び出しでcirclesliderはそれぞれの隣の座標まで移動することになります。

start_timer() 関数でset_timer() 関数をsettings.intervalTimeミリ秒ごとに呼び出し続けることでtimerをクリアしない限りcirclesliderは回り続けます。

最後にmove(index) 関数でstylingに必要なcurrentクラスをつけはずしします。ここでもモジュロ演算を使用してslidesTotal以上(ここでは5)の値が入らないようにします。

以上でcirclesliderの実装の解説は終了になります。次に普通のカルーセルスライダーを実装して円形のスライダーと動きを同期させてみます。

おススメ関連記事

コメント

0

コメントして下さい

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です