jQueryを使ったシンプルなスライドショー : JavaScript,jQuery
jQueryを使ったシンプルなスライドショーを作成。色々な場面で利用できるようにできるだけシンプルに。
このデモはMaking a Slideshow with jQueryを参考。
デモ(シンプル)
デモ（ノーマル)
ダウンロード(シンプル)
ダウンロード(ノーマル)
2009.08.26 外部画像(jpg)読み込み対応版リリース
ヘッダでスクリプトを読み込む
<script type="text/javascript" src="jquery-1.3.min.js"></script> <script type="text/javascript" src="slideshow.js" charset="utf-8"></script>
HTMLファイル
<div id="tmpSlide-1" class="tmpSlide temSlideActive">
<img src="slide1.jpg" alt="Slide">
</div>
<div id="tmpSlide-2" class="tmpSlide">
<img src="slide2.jpg" alt="Slide">
</div>
<div id="tmpSlide-3" class="tmpSlide">
<img src="slide3.jpg" alt="Slide">
</div>
<div id="tmpSlide-4" class="tmpSlide">
<img src="slide4.jpg" alt="Slide">
</div>
<div id="tmpSlide-5" class="tmpSlide">
<img src="slide5.jpg" alt="Slide">
</div>
<div id="tmpSlide-6" class="tmpSlide">
<img src="slide6.jpg" alt="Slide">
</div>
<ul id="tmpSlideshowControls">
<li class="tmpSlideshowControl" id="tmpSlideshowControl-1">»1</li>
<li class="tmpSlideshowControl" id="tmpSlideshowControl-2">»2</li>
<li class="tmpSlideshowControl" id="tmpSlideshowControl-3">»3</li>
<li class="tmpSlideshowControl" id="tmpSlideshowControl-4">»4</li>
<li class="tmpSlideshowControl" id="tmpSlideshowControl-5">»5</li>
<li class="tmpSlideshowControl" id="tmpSlideshowControl-6">»6</li>
</ul>ID
- tmpSlide-N ※Nは任意の数字。tmpSlideshowControl-Nに対応させる 。JavaScript,CSSで利用
- tmpSlideshowControls ※CSSで利用
- tmpSlideshowControl-N ※Nは任意の数字。tmpSlide-Nに対応させる 。JavaScript,CSSで利用
クラス
temSlide ※JavaScript,CSSで処理
temSlideActive ※JavaScript,CSSで利用
tmpSlideshowControl ※JavaScript,CSSで利用
tmpSlideshowControlOn ※JavaScriptで動的に生成。CSSで利用
tmpSlideshowControlActive ※JavaScriptで動的に生成。CSSで利用
temSlideActive ※JavaScriptで動的に生成。CSSで利用
スクリプト
var $$ = $.fn; /* $はJQueryオブジェクト */
$$.extend({ /* extend()はプロトタイプへ追加 */
SplitID : function()
{
return this.attr('id').split('-').pop();
},
Slideshow : {
Ready : function()
{
// hoverイベント パラメータは２つ。
// 第一引数 - マウスオーバーで呼び出される関数
// 第二引数 - マウスアウトで呼び出される関数
$('li.tmpSlideshowControl').hover(
function() {
$(this).addClass('tmpSlideshowControlOn');
},
function() {
$(this).removeClass('tmpSlideshowControlOn');
}
)
// clickイベント
$('li.tmpSlideshowControl').click(
function() {
$('div.tmpSlide').stop(); /* 表示 -アニメーション-を利用時に必要 */
$('div.tmpSlide').hide();
$('li.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');
// スライド操作
var elem = $('div#tmpSlide-' + $(this).SplitID());
// 表示 -通常-
elem.show();
// 表示 -フェードイン1- 初期不透明度0 -> 100% (例 1000ミリ秒で不透明度100%)
//elem.fadeIn(500);
// 表示 -フェードイン2- 初期不透明度 任意 -> 任意 (例 30%から1000ミリ秒で80%)
/*elem.css({"opacity": "0.3"})
elem.show();
elem.fadeTo(1000,0.8);*/
// 表示 -アニメーション-
elem.css({"width": "20px", "opacity": "0.1"});
elem.animate(
{width: "100%", opacity: "1.0"},
{duration: "slow"}
);
$(this).addClass('tmpSlideshowControlActive');
}
);
}
}
});
$(function()
{
$$.Slideshow.Ready();
});画像表示は初期状態ではアニメーション。表示したいタイプのコメントをはずすことにより他の表示タイプを選択。
※$はJQueryオブジェクト。
※jQuery.fn.extend(object)
jQueryエレメントに独自の新しいメソッドを追加する。（典型的なjQueryプラグインの作成方法） -jQuery.fn.extend(object) - jQuery 1.3.2 日本語リファレンス-
参考サイト jQuery.extendとjQuery.fn.extendの違い - JavaScriptとかPerlとかPHPとかさくらとか勉強する
開発中(画像の読み込み)
画像の読み込み用デモ(シンプル)
画像の読み込み用ダウンロード(シンプル)
ヘッダでスクリプトを読み込む
<script type="text/javascript" src="jquery-1.3.min.js"></script>
<script type="text/javascript" src="slideshow.js" charset="utf-8"></script>HTMLファイル
<div style="width: 384px; height: 288px; border: 1px solid #CCCCCC;" id="slideshowContainer-1"><!-- 画像表示域 --></div>
<ul id="slideshowControls-1" class="slideshowControls">
<li class="slideshowControl" id="slideshowControl-1">»1</li>
<li class="slideshowControl" id="slideshowControl-2">»2</li>
<li class="slideshowControl" id="slideshowControl-3">»3</li>
<li class="slideshowControl" id="slideshowControl-4">»4</li>
<li class="slideshowControl" id="slideshowControl-5">»5</li>
<li class="slideshowControl" id="slideshowControl-6">»6</li>
</ul>
<div style="width: 384px; height: 288px; border: 1px solid #CCCCCC;" id="slideshowContainer-2"><!-- 画像表示域 --></div>
<ul id="slideshowControls-2" class="slideshowControls">
<li class="slideshowControl" id="slideshowControl-7">»7</li>
<li class="slideshowControl" id="slideshowControl-8">»8</li>
<li class="slideshowControl" id="slideshowControl-9">»9</li>
<li class="slideshowControl" id="slideshowControl-10">»10</li>
<li class="slideshowControl" id="slideshowControl-11">»11</li>
<li class="slideshowControl" id="slideshowControl-12">»12</li>
</ul>設置のポイント
1.HTMLファイル,JavaScriptファイルと同一フォルダにslide1.jpg～slide12.jpgを保存
2.画像を表示するdiv要素にslideshowContainer-Nを設定する。ナビゲーションの役目を果たすulにIDとしてslideshowControls-Nを設定(NはslideshowContainer-とslideshowControls-で同じにする)。Nは数字。
4画像表示領域はdiv要素、ナビゲーションはul要素要素でマークアップする。
スクリプト
var $$ = $.fn; /* $はJQueryオブジェクト */
$$.extend({ /* extend()はプロトタイプへ追加 */
SplitID : function()
{
return this.attr('id').split('-').pop();
},
Slideshow : {
Ready : function()
{
// hoverイベント パラメータは２つ。
// 第一引数 - マウスオーバーで呼び出される関数
// 第二引数 - マウスアウトで呼び出される関数
$('li.slideshowControl').hover(
function() {
$(this).addClass('slideshowControlOn');
},
function() {
$(this).removeClass('slideshowControlOn');
}
)
// clickイベント
$('li.slideshowControl').click(
function() {
// コンテナ番号(#slideshowContainer-N)
var slideshowContainerNo = $(this).parent('ul.slideshowControls').SplitID();
var slideshowContainer = 'div#slideshowContainer-'+slideshowContainerNo
// 画像オブジェクト
var imgElem = new Image();
// srcの設定
imgElem.src = 'slide' + $(this).SplitID() + '.jpg';
// 画像オブジェクトの非表示(display:none)
$(imgElem).hide();
$(slideshowContainer + ' > img').remove();
// 画像オブジェクト追加
$(slideshowContainer).append(imgElem);
$('li.slideshowControl').removeClass('slideshowControlActive');
// スライド操作
var elem = $(slideshowContainer + ' > img');
// 表示 -通常-
//elem.show();
// 表示 -フェードイン1- 初期不透明度0 -> 100% (例 1000ミリ秒で不透明度100%)
elem.fadeIn(1000);
// 表示 -フェードイン2- 初期不透明度 任意 -> 任意 (例 30%から1000ミリ秒で80%)
/*elem.css({"opacity": "0.3"})
elem.show();
elem.fadeTo(1000,0.8);*/
// 表示 -アニメーション-
/*elem.css({"width": "20px", "opacity": "0.1"});
elem.animate(
{width: "100%", opacity: "1.0"},
{duration: "slow"}
);*/
$(this).addClass('slideshowControlActive');
}
);
}
}
});
$(function()
{
$$.Slideshow.Ready();
});
コメントはまだありません。
コメントの投稿
改行と段落タグは自動で挿入されます。メールアドレスは表示されません。
利用可能な HTML タグ :
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite="">
<cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>