[JS]シンプル！高性能！超軽量！使い勝手の良いコンテンツスライダーのスクリプト -jContent

サイト構築 -JavaScript

Post on:2011年4月12日

jContentの主な特徴

スライダーにはテキスト、画像、Flash、動画などあらゆるコンテンツを配置可能。
1ページに複数のスライダーを設置可能。
自動送り機能（オプション）。
カルーセル機能（オプション）。
スライドの方向は、水平・垂直に対応。
カスタマイズは簡単。
クロスブラウザ対応。
IE6+, Firefox2+, Chrome, Safari, Opera9+
Validなマークアップ
利用は無料（GPL/MIT licence）。

jContentのデモ

デモではベーシックなスライダーの水平・垂直方向にスライドするものをはじめ、オプションで実装できる自動送り付き・カルーセルタイプの動作が確認できます。

デモ：ベーシックなスライダー：水平方向

デモ：ベーシックなスライダー：垂直方向

[ad#ad-2]

デモ：自動送り機能付きのスライダー：水平方向

デモ：自動送り機能付きのスライダー：垂直方向

デモ：カルーセル機能付きのスライダー：水平方向

デモ：カルーセル機能付きのスライダー：垂直方向

jContentの実装

実装は簡単で、パネル内のコンテンツをdiv要素で配置し、数行のスクリプトを記述するだけです。

HTML

<div id="demo">
	<a title="" href="#" class="prev"></a>
	<div class="slides">
		<div>...</div> 
		<div>...</div>             
		<div>...</div> 
		<div>...</div> 
	</div>
	<a title="" href="#" class="next"></a>
</div>

JavaScript

<script type="text/javascript" language="javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.easing.min.1.3.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.jcontent.js"></script>
<link href="css/jcontent.css" rel="stylesheet" type="text/css"/>
 
<script type="text/javascript" language="javascript">
$("document").ready(function(){
	$("div#demo1").jContent({orientation: 'horizontal',
		 easing: "easeOutCirc",
		duration: 500
});
</script>