1. jQueryのダウンロード
まず、準備としてjQueryと必要なプラグインをダウンロードしておきます。
(1)jQuery本体(jquery-1.10.1.min.js)を http://jquery.com/download/ からダウンロードします。
(2)timerプラグイン(jquery.timer.js)をhttp://plugins.jquery.com/jquery-timer/からダウンロードします。
(3)easingプラグイン(jquery.easing.1.3.js)をhttp://plugins.jquery.com/jquery.easing/からダウンロードします。
2. 画像ファイルの準備
画像ファイルは全て幅と高さが同じものを作成します。
ここで説明するサンプルでは、幅500px、高さ375pxとしてあります。
(サンプルでは001.jpg~009.jpgの9つの画像を使います。)
3.コードの記述
実際にコードを書いていみましょう。
(1) HTML本体
index.htmlファイルを下のように記述します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Slideshow</title> <link rel="stylesheet" href="slideshow.css"/> <script src="js/jquery-1.10.1.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.timer.js"></script> <script src="slideshowr.js"></script> </head> <body> <div id="window"> <ul id="slideshow"> </ul> </div> </body> </html> |
至ってシンプルですが、簡単に説明をしておきます。
(i) id=”window”のdivがスライドショーを表示するフレームになります。画像ファイルと同じ大きさとします。幅と高さはjavascript内で指定します。それ以外のプロパティは、スタイルシートで指定します。
(ii) id="slideshow"のulが画像リストになります。5行×2列になるようにjavascriptと、スタイルシートで指定します。
(2)スタイルシート
slideshow.cssファイルを下のように記述します。
*{margin:0; padding:0;} body{background:#353637; height:100%;} #window{ clear:both; background:#131310;; overflow:hidden; position:relative; margin:10px auto 10px auto; } #slideshow{ overflow:hidden; position:relative; } #content img{float:left; padding:30px;} #slideshow li{ float:left; display:inline; } |
簡単に説明をしておきます。
(i) window, slideshowに関して
① overflow:hidden; 一画像分の大きさに入らない領域は隠すようにしておきます。
② position:relative; 通常の位置を基準とした相対的な配置を行います。
(ii) img, slideshow li に関して
① float:left; ボックスを左に配置して、後続の内容を右側に回り込ませます。
② display:inline; リスト項目を横並びで表示するようにします。
(3) Javascript
slideshowr.jsファイルを下のように記述します。
var imagefiles = ["0001.jpg", "0002.jpg", "0003.jpg", "0004.jpg", "0005.jpg", "0006.jpg", "0007.jpg", "0008.jpg", "0009.jpg"]; var iwidth = 500; /* image幅 */ var iheight = 375; /* inage高さ */ var col = 2; /* 画像リスト・カラム数 */ var row = Math.floor((imagefiles + 1) / col); /* 画像リスト行数 */ var timeout = 5000; /* 5秒ごとに切り替え */ var animation_duration = 2500; /* 2.5秒間エフェトクト効果による表示切り替え */ var easing_mode = 'easeOutBack'; var easings = ["linear", "swing", "jswing", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInSine", "easeOutSine", "easeInOutSine", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBack", "easeOutBack", "easeInOutBack", "easeInBounce", "easeOutBounce", "easeInOutBounce"]; /** 画像をセットする */ function setHtmlStrings(elemid, sentence) { $(elemid).empty(); $(elemid).html(sentence); } /* ウィンドウ・画像初期化 */ function initImageList() { var wpx = iwidth + 'px'; var hpx = iheight + 'px'; var htmlstr = ''; var i = 0; for(i = 0; i < imagefiles.length; i++) { htmlstr = htmlstr + '<li class="imagebox"><img src="images/' + imagefiles[i] + '" alt="image ' + i + '"/></li>'; } setHtmlStrings("#slideshow", htmlstr); $("#window").css("width", wpx); $("#window").css("height", hpx); $(".imagebox").css("width", wpx); $(".imagebox").css("height", hpx); wpx = (iwidth * col) + 'px'; hpx = (iheight * row) + 'px'; $("#slideshow").css("width", wpx); $("#slideshow").css("height", hpx); } $(document).ready(function(){ var i = 0; var currentimageid = 0; var leftpos = 0; var k = 0; initImageList(); $.timer(timeout, function (timer) {
if(leftpos == 0) leftpos = -iwidth; else leftpos = 0; var j = Math.floor((i + 1) / 2); if(i == (imagefiles.length - 1)) { toppos = 0; leftpos = 0; } else toppos = -iheight * j;
var leftpx = leftpos + 'px'; var toppx = toppos + 'px'; easing_mode = easings[k]; $("#slideshow").stop().animate({left: leftpx, top: toppx}, {easing: easing_mode, duration: animation_duration}); i++; if(i == imagefiles.length) i = 0;
k++; if(k == easings.length) k = 0; }); }); |
簡単に説明をしておきます。
(i) initImageList() 関数
9つの画像ファイルのリストを生成して、 id="slideshow"のul内に5行×2列になるようにプロパティをセットします。
(ii) $(document).ready()関数
9つの画像ファイルを5秒ごとに切り替えて表示します。画像の移動はjQueryのanimate()関数で実現しています。移動時のエフェクトはeasingプラグインの機能を使用しています。
コメントをお書きください