バシャログ。

サンプルデモ

設置方法

配布ページよりデータ一式をダウンロードし、easySliderを利用したいhtmlのhead要素などで以下のファイルおよび処理を読み込みます。

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="easySlider.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").easySlider();
	});
</script>

表示する部分は以下です。

<div id="slider">
<ul>
<li>画像や文章その1</li>
<li>画像や文章その2</li>
<li>画像や文章その3</li>
</ul>
</div>

CSSの設定は以下のようになります。

#slider ul, #slider li {
	margin:0;
	padding:0;
	list-style:none;
}
#slider, #slider li { 
	width:500px;
	height:200px;
	overflow:hidden; 
}

設定が簡単なので、FLASHを使用するまでもないようなサイトトップページのメイン画像なんかに使えそうですね。

配布サイト

• jQuery plugin - Easy Image or Content Slider