jQueryで実現するシンプルなスライドショー : jQuery
jQueryを使ったシンプルなスライドショーを作成した。色々な場面で利用できるように汎用性を持たせた。
»Making a Slideshow with jQuery
Demo
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>設置のポイント
- HTMLファイル,JavaScriptファイルと同一フォルダにslide1.jpg～slide12.jpgを保存
- 画像を表示するdiv要素にslideshowContainer-Nを設定する。ナビゲーションの役目を果たすulにIDとしてslideshowControls-Nを設定(NはslideshowContainer-とslideshowControls-で同じにする)。Nは数字。
- 画像表示領域は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();
});コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。