シンプルな画像スライドショーをjqueryで | web design | find a way !
使い手側からみたウェブデザイン／ウェブサイト構築のいま。ITテクノロジーやIT業界を興味本位で飛ばし読み。地方都市、who cares? jqueryで簡単スライドショーを作ってしまえました。 HTMLはこれ。 <div id="slideshow"> <img src="img/img1.jpg" alt="" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div> CSSはこれ。 #slideshow { position:relative; height:350px; } #slideshow IMG { position:absolute; top:0; left:0; z-index:8; } #slideshow IMG.active { z-index:10; } #slide
Nivo Slider - jQueryを利用した画像のスライドショー
このサイトの一番下でJavaScriptとCSSをダウンロードできます。ダウンロードするのはProductionと書いてある方でいいと思います。ただ、CSSについてはそのままだとうまく表示されないと思うので以下のように変更して上書きします。 現在はCSSの追加なしで表示されるようになっています。また、全ファイルがzip形式でダウンロードできるようになっています。最後に書いたjavascriptのカスタマイズはまだ参考になるのでぜひご活用ください。 * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * March 2010 */ /* ここからが追加部分 */ #slider { position:relative; min-height:
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
