画像を切り替えるだけのシンプルなスライド「simpleSlide」

画像を切り替えるだけのシンプルなスライドを実装プラグイン「simpleSlide」を紹介します。

jQueryプラグイン「simpleSlide」

このプラグインを使えば、指定した複数の画像を順番に切り替えるシンプルなスライドを実装することができます。

オプションは、画像を切り替える時間のみ(デフォルトでは5000msec)。シンプルですね。

スポンサーリンク

それではデモページをスライドをご覧ください。

「simpleSlide」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="simpleSlide のデモでーす。">
<title>simpleSlide - jQuery Plugin Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="simpleSlide.min.js"></script>
<script>
$(function(){
  $('#demo').simpleSlide(1000);
});
</script>
</head>
<body>
<p><a href="http://webkaru.net/jquery-plugin/simpleslide/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>simpleSlide のデモ。</h1>

<div id="demo">
  <div><img src="images/01-red.png" /></div>
  <div><img src="images/02-orange.png" /></div>
  <div><img src="images/03-yellow.png" /></div>
  <div><img src="images/04-green.png" /></div>
  <div><img src="images/05-blue.png" /></div>
  <div><img src="images/06-indigo.png" /></div>
  <div><img src="images/07-purple.png" /></div>
</div>

</body>
</html>
スポンサーリンク