jQuery でスライドショー 2010.01.15記

css globe: jQuery plugin - Easy Image or Content Slider

HTML

<div id="slider">
	<ul>
		<li><img src="./files/20100115/g1.jpg" alt="東京駅" /></li>
		<li><img src="./files/20100115/g2.jpg" alt="日暮里駅" /></li>
		<li><img src="./files/20100115/g3.jpg" alt="フジテレビ" /></li>
		<li><img src="./files/20100115/g4.jpg" alt="メリア" /></li>
		<li><img src="./files/20100115/g5.jpg" alt="黄色いゴーヤ" /></li>
	</ul>
</div>

ヘッダ JavaScript

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="/common/ezs/easySlider.packed.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	$("#slider").easySlider();
});
</script>

CSS

<style type="text/css" media="screen">
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
}
#slider, #slider li{ 
	width:580px;
	height:200px;
	overflow:hidden; 
}
</style>