今日の人気記事

  1. 入力フォームのフォーカスを自動でタブ移動「Autotab」

画像を切り替えるだけのシンプルなスライド「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="//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="https://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>
スポンサーリンク

関連記事(一部広告含む)