今回は、丸いめんこのようなイメージ画像をひっくり返しながらクルクル切り替えるスライドショーを紹介します。（めんこといっても若い人にはわからないかもしれませんが、他に良い例えが浮かばなかったので。）
では、サンプルを作ってみましたのでご覧下さい。
→『Flipping Circle Slideshow』サンプル
最近はこのようなサークルのカタチが流行っているようですね。設置も簡単ですので、活用してみて下さい。
まずはこちらの『Flipping Circle Slideshow』のサイトから、ソースを一式ダウンロードします。
＜head＞部分にCSSを記述します。
|
1 2 |
<link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/modernizr.custom.js"></script> |
続いて、＜/body＞の直前にJavaScriptの設置をして、準備完了です。
|
1 2 3 4 5 6 7 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.flipshow.js"></script> <script> $( function() { $( '#fc-slideshow' ).flipshow(); } ); </script> |
＜body＞部分の任意の場所に、以下のように表示させたい画像とテキストを指定して完成です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="fc-slideshow" class="fc-slideshow"> <ul class="fc-slides"> <li><img src="images/1.jpg" /><h3>Hot</h3></li> <li><img src="images/2.jpg" /><h3>Cold</h3></li> <li><img src="images/3.jpg" /><h3>Light</h3></li> <li><img src="images/4.jpg" /><h3>Dark</h3></li> <li><img src="images/5.jpg" /><h3>Soft</h3></li> <li><img src="images/6.jpg" /><h3>Hard</h3></li> <li><img src="images/7.jpg" /><h3>Smooth</h3></li> <li><img src="images/8.jpg" /><h3>Rough</h3></li> </ul> </div> |
※ 使用する画像は幅400px ｘ 高さ400pxとなっています。
サンプルのソースをかいておきます。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="jp" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』サンプル</title> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/modernizr.custom.js"></script> </head> <body> <h1>めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』サンプル</h1> <div id="fc-slideshow" class="fc-slideshow"> <ul class="fc-slides"> <li><img src="images/1.jpg" /><h3>Um...</h3></li> <li><img src="images/2.jpg" /><h3>Surprise</h3></li> <li><img src="images/3.jpg" /><h3>Ready?</h3></li> <li><img src="images/4.jpg" /><h3>Onemu</h3></li> <li><img src="images/5.jpg" /><h3>dame!</h3></li> </ul> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.flipshow.js"></script> <script> $( function() { $( '#fc-slideshow' ).flipshow(); } ); </script> </body> </html> |
あわせてお読みください
高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリ…
Camera slideshow 「Camera slideshow」は細かいところまであらゆる設定ができる高機能のjQueryスライドショーです。 デフォル…
Slider Pro 「Slider Pro」は多機能のスライダーを作ることができるjQueryプラグインです。このjQueryプラグインを使って、左右の画像を…
コメントを残す