More Related Content
Similar to 【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう (20)
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
- 101. 本日使用するデータ:http://goo.gl/CQSyEM
File APIを使います
html5APIを使って自分の好きな画像のスライドを作ろう
var $listLength = $('.slide ul li').length;
$('.slide ul li').each(function(){
$(this).find('img').css('z-index',$listLength);
$listLength--;
});
スライド部分のliの数を取得して、その数を使ってz-indexを指定していきます。
.each(function(){処理});は繰り返し文で、セレクタで指定したliがあるごとに処理を実行します。
thisは繰り返しの中で現在対象となっているものを指します。
.find()は引数()の中のものを探すというものです。
--はデクリメント演算子と呼ばれるもので1だけ減少します。
ここまでの内容が
19_file_api.htmlに
まとまっています
ファイルをドラッグすると、スライド部分に追加した最後の画像が一番上にくるので調整しましょう。