TOP > テンプレート > iView Sliderでスライドショー

iView Sliderでスライドショー


スライドショーをしてくれるjQueryを使ってみました。

iView SliderというjQueryが公開されているようで、今回はそのiView 2.0を使ってみました。

手順1.iViewをダウンロードしてきて解凍。


「css」「img」「js」などの必要なファイルをコピーしてきます。

手順2.headに必要なファイルのパスを通す。

以下のファイルにパスを通します。

css/iview.css
css/skin 1/style.css
js/jquery-1.7.1.min.js
js/raphael-min.js
js/jquery.easing.js
js/iview.js

手順3.htmlで画像を表示。

下記のような感じで画像をセットします

<div data-iview:image="画像1.jpg"></div>
<div data-iview:image="画像2.jpg"></div>


テキストのアニメーションをつける場合は、iview-captionクラスを使います。
data-xでX座標、data-yでY座標、data-transitionで動きなどを定義ます。

<div data-iview:image="画像1.jpg">
<div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">これは画像1です。</div>
</div>

<div data-iview:image="画像2.jpg">
<div class="iview-caption" data-x="80" data-y="275" data-transition="wipeLeft">これは画像2です。</div>
</div>


手順4.スクリプトを実行。

スライドショーのポーズタイムなどを設定して実行します。



手順5.画像のサイズに合わせてCSSを変更。

css/skin 1/style.cssなどにキャンバスのサイズが定義されているので、画像のサイズに合わせて変更します。



[htmlのソース]





[実行結果]


iViewを使ってみた
これは右ワイプ
これは左ワイプ
CSSをいじってiViewの描画サイズを変更
pausetimeも変更できる
ああああああああああ
いいいいいいいいいい
ううううううううううううううう
ええええええええええええええええええ
おおおおおおおおおお

左側にテキスト領域

いろんなことができて便利 使い方はdocumentationに書いてある!

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
最後までいくと…
あとは繰り返し

Sponsored Link
Powered by PHPなんか怖くないぞ(>_<)