「起業家と投資家を繋ぐ」テクノロジー&スタートアップ関連の話題をお届けするブログメディア
Webサイト上でバナーや商品のサムネイル画像などの見せ方として、並べられた画像(コンテンツ要素)を一定のスピードで自動でスライドして、無限ループさせているものをたまに見かけます。 そんなビューアー的役割のコンテンツ無限ループスライダーを作ってみたので紹介してみます。 まずは動作のサンプルから。 jQuery LOOPSLIDER【SAMPLE】 10個並べてある画像が自動でスライドし、無限にループしています。 この動作の全体構成について、HTMLから。 ◆HTML <div id="loopslider"> <ul> <li><a href="#"><img src="img/photo01.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo02.jpg" width="1
slider.jsはラナデザインアソシエイツの山本圭助さんが作ったjQueryのプラグインです。簡単にサイトに取り入れることが可能で、オプションも豊富なのでカスタマイズ性にも優れいてます。 今回はslider.jsを使って、画像を流れるテロップのように表現してみました。 ファイルのダウンロード 以下のファイルをサイトよりダウンロードします。 slider.js jquery.easing.js スクリプトの読み込み jQueryはGoogleから読み込ませています。 jquery.min.jsのバージョンによってはslider.jsが機能しない場合があります。1.7のバージョンだと機能しました。 コード 詳しくは、jQueryプラグインなスライダー slider.js | かえラボBlogを参考にして頂ければいいと思いますが、基本は以下の3つの要素が必要みたいです。 スライドする要素(.s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く