今日の人気記事

  1. 簡単にドロップダウンメニューがつくれる「Superfish」
  2. アニメーションでテキストが切り替わる「Words Rotator」
  3. グラフにマウス操作で動かせる目盛りを実装「2D Slider and Range」
  4. 年月の選択ボタンを実装「Multiple Month Picker」
  5. 指定した要素をドラッグして移動「tinyDraggable」

クールな画像スライダー「Moving Boxes」

スポンサーリンク

クールな画像スライダーjQueryプラグイン「Moving Boxes」を紹介します。

jQueryプラグイン「Moving Boxes」

「Moving Boxes」は、divで囲まれた画像とコメントをクールにスライドしてくるjQueryプラグインです。

スポンサーリンク

デモの画像をクリックするとスライドされますので、楽しんじゃってください。

「Moving Boxes」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Moving Boxes - jQueryプラグインまとめのコピペ</title>
<link href="movingboxes.css" rel="stylesheet">
<!--[if lt IE 9]>
<link href="movingboxes-ie.css" rel="stylesheet" media="screen" />
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.movingboxes.min.js"></script>
<style>
	/* Dimensions set via css in MovingBoxes version 2.2.2+ */
	#slider { width: 500px; }
	#slider li { width: 250px; }
</style>
<script>
$(function(){
	$('#slider').movingBoxes({
	startPanel   : 1,      // start with this panel
	wrap         : false,  // if true, the panel will infinitely loop
	buildNav     : true,   // if true, navigation links will be added
	navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
	});
});
</script>
</head>

<body>
<h1>Moving Boxesのデモでーす。</h1>
<ul id="slider">
  <li>
    <img src="images/1.jpg" alt="picture">
    <p>デモです。</p>
  </li>
  <li>
    <img src="images/2.jpg" alt="picture">
    <p>デモです。</p>
  </li>
  <li>
    <img src="images/3.jpg" alt="picture">
    <p>デモです。</p>
  </li>
  <li>
    <img src="images/4.jpg" alt="picture">
    <p>デモです。</p>
  </li>
  <li>
    <img src="images/5.jpg" alt="picture">
    <p>デモです。</p>
  </li>  
</ul>
</body>
</html>

詳細はこちらからどうぞ。
» Moving Boxes

スポンサーリンク

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