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

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

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

2015年12月03日

みやびプリン 140 87

144 144

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

おはようございます。

いつもより少しだけ早く起きた(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ライセンスなので、
じゃんじゃん改造などお好きにお使いください。

さて、会社行こう。

基本プレイ無料!みんなで「つくる」オンラインアクションRPG【メイプルストーリー2】 - メイン

トラックバック(0)

トラックバックURL:

コメントする

ページトップへ戻る