skippr.jsを使ってシンプルなスライドショーを表示する方法をご紹介します。
Contents
ディスプレイ広告
skippr.jsを使ってシンプルなスライドショーを表示するCSSの記述
※skippr.cssファイルを読み込みます。htmlとbodyタグのheightとwidhtに100%を指定します。その他、必要に応じて変更して下さい。
<style> html, body { height: 100%; width: 100%; } body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0 30px 0; } #container{ width: 100%; height: 80%; min-height: 500px; position: relative; } </style> <link rel="stylesheet" href="skippr.css">
skippr.jsを使ってシンプルなスライドショーを表示するHTMLの記述
※スライドショーエリア(id=”theTarget”)内にスライドショー用の画像(1 ~ 3.jpg)を用意します。
<h1>skippr.jsを使ってシンプルなスライドショーを表示</h1> <div id="container"> <div id="theTarget"> <div style="background-image: url(1.jpg)"></div> <div style="background-image: url(2.jpg)"></div> <div style="background-image: url(3.jpg)"></div> </div> </div>
skippr.jsを使ってシンプルなスライドショーを表示するJavaScriptの記述
※jquery-1.12.0.min.js、skippr.min.jsファイルを読み込みます。$(“スライドショーエリア”).skippr({オプション})を記述します。オプションでは自動スライドや速度等を設定できます。
<script src="jquery-1.12.0.min.js"></script> <script src="skippr.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#theTarget").skippr({ autoPlay : true, autoPlayDuration : 2000, logs : true }); }); </script>
skippr.jsを使ってシンプルなスライドショーを表示するデモページ
skippr.jsを使ってシンプルなスライドショーを表示するデモページ
ソース元:Skippr. A jQuery plugin for creating tasteful slideshows.
Skippr. A jQuery plugin for creating tasteful slideshows.
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。