クールな画像スライダー「Moving Boxes」
当ページのリンクには広告が含まれています。
スポンサーリンク
クールな画像スライダーjQueryプラグイン「Moving Boxes」を紹介します。
jQueryプラグイン「Moving Boxes」
「Moving Boxes」は、divで囲まれた画像とコメントをクールにスライドしてくるjQueryプラグインです。
スポンサーリンク
デモの画像をクリックするとスライドされますので、楽しんじゃってください。
デモのソース（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 "●"; } // 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
スポンサーリンク