jQuery フリックスライドショー プラグインだ！

謎のプリン語る。
プログラミングの役立つ情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

jQuery フリックスライドショー プラグインだ！

みやびプリン 500 316

144 144

※この記事は9年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

おはようございます。

いつもより少しだけ早く起きた（8時）
なので（？）、表記の通り公開してみた。

スマホ用のフリックスライドショーです。
その名も、Simple Flicker View　だ！

僕は、あれなんですよ、プラグインとかね、多機能なの多いけど、そんなのいらないのよ。
シンプルでいいのよ、シンプルで。
あと改造しやすいのがいいね。
というわけで、自作するわけですよ。

さて前置きはいい、まずはスクリプト！

●jquery.sfv.js
●jquery.sfv.min.js
(min版、は軽量版です。どっちでも動く)

スクリプトだけ書かれた画面が出るので、コピペしてお使いください。

さて、使い方は、下記。


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script src=" 本エントリーのJSを格納した場所 /jquery.sfv.min.js">
<script>
$(function(){

 //フリック表示させたいブロックのIDを入れたリンクのクラスに、sfvを適用
$('#flickView').simpleFlickerView({
  slideBtnPrev: '前へ',
  slideBtnNext: '次へ',
  reverseParsent: 100,
  listWidth: 80
});

});
</script>
</head>
<body>
<div id="flickView">
  <ul>
    <li><img src="images/test01.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test02.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test03.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test04.jpg" alt="" width="100%" height="auto"></li>
    <li><img src="images/test05.jpg" alt="" width="100%" height="auto"></li>
  </ul>
</div>
</body>

divかなんかに、リストのラッパー要素(ulとか)、その中にリスト要素(liとか)って構造でタグをつける。 その一番外側のタグに対してプラグイン関数を効かせる。 すると、自動で下記DOMを生成してくれる。

<div id="flickView" class="SFVWrapperObj">
  <ul class="SFVSlideShiftBtn">
    <li class="SFVShiftPrev"><a href="javascript:void(0);">前へ</li>
    <li class="SFVShiftNext"><a href="javascript:void(0);">次へ</li>
  </ul>
  <div class="SFVSliderWrapper">
    <ul class="SFVSliderList">
      <li class="SFVCopyList"><img src="images/test04.jpg" alt="" width="100%" height="auto"></li>
      <li class="SFVCopyList"><img src="images/test05.jpg" alt="" width="100%" height="auto"></li>
      <li><img src="images/test01.jpg" alt="" width="100%" height="auto"></li>
      <li><img src="images/test02.jpg" alt="" width="100%" height="auto"></li>
      <li><img src="images/test03.jpg" alt="" width="100%" height="auto"></li>
      <li><img src="images/test04.jpg" alt="" width="100%" height="auto"></li>
      <li><img src="images/test05.jpg" alt="" width="100%" height="auto"></li>
      <li class="SFVCopyList"><img src="images/test01.jpg" alt="" width="100%" height="auto"></li>
      <li class="SFVCopyList"><img src="images/test02.jpg" alt="" width="100%" height="auto"></li>
    </ul>
  </div>
  <div class="SFVLoadingBlock" style="width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0; display: none; position: absolute; z-index: 10;">Loading...</div>
</div>

機能としては、
・フリックできる。
・自動スライドショー
・次へ前へボタン
・左右に次・前のスライドを表示可能
・サイズの指定可能
・中身は自由に編集できる
ってとこか。

オプションは下記になります。

オプション名 説明 値の形式 初期値
shiftTime 自動スライド時の、
次のスライドまでの時間		 数値 6000
speedMove スライドが
動く時間		 数値 800
listWidth スライド単体の横幅 数値(%指定) auto
listHeight スライド単体の縦幅 数値(%指定←横幅に対して) auto
tagSingle スライド単体の
タグ指定		 タグ名 li
tagWrapper スライドを
囲っているタグ指定		 タグ名 ul
slideBtnOn 次へ・前へボタンを表示させるかどうか true/false
（真偽値）		 true
autoSlide 自動スライドさせるかどうか true/false
（真偽値）		 true
slideBtnPrev 前へボタンの中身を指定 テキスト、タグ
（imgも可能）
slideBtnNext 次へボタンの中身を指定 テキスト、タグ
（imgも可能）
reverseParsent フリックが
中途半端な時に
どれくらいで戻すかの指定		 数値（横幅/数値） 8
loadingBlock フリック時、ループの
一番最後or最後に来た時に表示する、
ローディングブロックの中身		 テキスト、
タグ（imgも可能）		 Loading...

シンプルかつ、各種の設定は細かく、と作ってみますた。
CSSでの表示の仕方もわりとしやすく、って感じで作ったつもりです。

MITライセンスなので、
じゃんじゃん改造などお好きにお使いください。

さて、会社行こう。

トラックバック(0)

トラックバックURL:

コメントする

※
※
※

ページトップへ戻る