わずか2行でスライドショーを実現「A slide-show in 2 lines of JavaScript」

フルスクリーンのスライドショーを2行で実現するチュートリアルです。
なお、原文だとJS2行となっていますが、もうちょいあります。
簡単であることには変わりありません。
via:A slide-show in 2 lines of JavaScript
わずか2行でスライドショーを実現「A slide-show in 2 lines of JavaScript」サンプル

使用方法
jQueryからjquery.jsをダウンロードします。
これをhead内に記述。
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>

次にhtmlを以下のように書きます。
<div>This is the first slide</div>
<div>This is the second slide</div>
<div>This is the third slide</div>
<div>This is the penultimate slide</div>
<div>And this is the final slide</div>

※元サイトだとsectionになっていますが、ここでは汎用性を考慮しdivにしています。

そして、JavaScriptを2行上記の後に入れます。
<script>
var currentdiv = $('div').first().fadeIn();
$('body').bind('click keypress', function() { currentdiv = currentdiv.fadeOut().next('div').fadeIn(); });
</script>

まちがいなく2行です。。
分解すると
var currentdiv = $('div').first().fadeIn(); //最初のdivをフェードイン
$('body').bind('click keypress', //keyをクリックした時
function() { currentdiv = currentdiv.fadeOut().next('div').fadeIn();
//カレントをフェードアウトし、次のdivをフェードイン
});

最後にCSSを記述すれば完成です。
<style>
body { color: #ffffff; background-color: #000000; font-family: arial; font-size: 40px; -webkit-user-select: none; }
div { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding-top: 200px; }
em { color: #ffff00; font-family: serif; font-size: 150%; }
</style>

わずか2行でスライドショーを実現「A slide-show in 2 lines of JavaScript」サンプル

sponsors

「わずか2行でスライドショーを実現「A slide-show in 2 lines of JavaScript」」をシェアする

記事作成:
記事URL:

TOP > > > わずか2行でスライドショーを実現「A slide-show in 2 lines of JavaScript」