スマホでよく見かけるflickバナー。
これを手軽に実装する手立てはないかとぐぐったら、jQuery.flickSimpleという素敵なプラグインを発見したので、使い方を勉強しますた。
jQuery.flickSimple.jsをGithubからダウンロード。
#flick { width: 100%; max-width:690px; position: relative; /* IE6・7の overflowバグ回避 */ overflow: hidden; /* JavaScript無効時にスクロール表示させたいから */ } #flick ul { display: block; width: 1000%; margin: 0; padding: 0; overflow: hidden; } #flick ul li { float: left; list-style-type: none; width: 100%; max-width:690px; height:100px }
<div id="flick"> <ul> <li style="background-color:red;">1</li> <li style="background-color:blue;">2</li> <li style="background-color:yellow;">3</li> <li style="background-color:green;">4</li> </ul> </div>
jQuery(function($){ var nLen = $('#flick > ul > li').length; $('#flick > ul').css({ width:(100*nLen) + '%' }); $('#flick').flickSimple({ snap: 'first', }); });JavaScriptで動的にwidthの設定をしているのですが、逆にこの処理がないと、#flick > ulが1000%となっているため、適切に処理をしてくれないようです。
それにしても便利だなー、このプラグイン。
0 コメント:
コメントを投稿