jQueryを使用したシンプルなスライドボックス/コンテンツ表示/SolidStateEveryday

スライドボックスjquery-1.3.2.min.js

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Easy Slider jQuery Plugin Demo</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").easySlider();
	});	
</script>
<meta name="description" content="Simple easy-to-use jQuery plugin for sliding images and content">
</meta>

<style>
body {
	margin:0;
	padding:0px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}

img{border:none;}
	

/* Easy Slider */

	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:666px;
		height:240px;
		overflow:hidden; 
		}
	span#prevBtn{}
	span#nextBtn{}					

/* // Easy Slider */

</style>
</head>
<body>

	<div id="slider">
		<ul>				
			<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" /></a></li>
			<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" /></a></li>
			<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg"  /></a></li>
			<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" /></a></li>
		</ul>
	</div>

</body>
</html>

	cssglobe.com

jQueryを使用したシンプルなスライドボックスです。
ul要素内のli要素を一つのパネルとしてスライドします。
サンプルでは一番ベーシックなものを紹介してますが、これにボタン画像でトリガーをつけることも出来ます。

セッティング

１．ダウンロード＆セッティング

サイトへ行き、easyslider1.5.zip をダウンロードしてください。
解凍したら、cssフォルダと jsフォルダをアップロードします。
jsフォルダ内の jQuery は少し前のバージョンですので、最新版に変えてもOKです。
（サンプルでは、jquery-1.3.2.min.js に変更しています。）