今日の人気記事

  1. Tableカラム(列)にソート機能を追加「Tablesorter」
  2. くるくる回る画像ギャラリー「Rondell」
  3. テーブルのヘッダーを固定してデータ行をスクロール表示「tbodyScroll」
  4. 画像に拡大・縮小ボタンを「Zoomer」
  5. 画像の拡大・縮小と移動(パン)「pan and zoom 」

複数の画像がさまざまな効果で切り替わるスライドショー「Cycle2」

スポンサーリンク

複数の画像がさまざまな効果で切り替わるスライドショーを実装するプラグイン「Cycle2」を紹介します。

jQueryプラグイン「Cycle2」

このプラグインを使えば、フェイド・スライド・スクロール……などのさまざまな効果で複数の画像がくるくると切り替わるスライドショーを実装することができます。

実装はクラス名「cycle-slideshow」以下に画像を指定するだけなので、簡単!

画像を切り替えるボタンも設置可能で、レスポンシブなので画像スライドショーのひとつの候補としていかがでしょうか。

スポンサーリンク

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

「Cycle2」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Cycle2 のデモでーす。">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="jquery.cycle2.js"></script>
<style>
.cycle-slideshow img {
  padding: 50px;
  width: 300px;
}
</style>
</head>
<body>
<h1>Cycle2 のデモでーす。</h1>
<div class="cycle-slideshow"
    data-cycle-fx="scrollHorz"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="1000"
    >
  <img src="images/01-red.png" />
  <img src="images/02-orange.png" />
  <img src="images/03-yellow.png" />
  <img src="images/04-green.png" />
  <img src="images/05-blue.png" />
  <img src="images/06-indigo.png" />
</div>
<div class="cycle-slideshow">
  <img src="images/07-purple.png" />
  <img src="images/06-indigo.png" />
  <img src="images/05-blue.png" />
  <img src="images/04-green.png" />
  <img src="images/03-yellow.png" />
  <img src="images/02-orange.png" />
  <img src="images/01-red.png" />
</div>
</body>
</html>
スポンサーリンク

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