jCarouselLite

こちらからファイルをダウンロード→http://www.gmarwaha.com/jquery/jcarousellite/#download

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript">
<!--
$(window).load(function(){
	$('#jCarouselLite1 div').jCarouselLite({
		auto:1500,
		speed:1000,
		visible : 1,
		btnNext: ".next",
		btnPrev: ".prev"
	});
	$('#jCarouselLite2').jCarouselLite({
		auto:2000,
		speed:2000,
		visible : 1,
		vertical:true
	});
});
//-->
</script>

5行目、普段なら　$(function(){　から始まりますが、window.loadで始めないと初めに読み込んだ際に画像自体がうまく表示されません。

<div id="jCarouselLite1">
   <a href="javascript:void(0)" class="next">&gt;</a>
   <a href="javascript:void(0)" class="prev">&lt;</a>
   <div>
      <ul class="fade"><!--
          --><li><a href="recipe.html"><img src="images/index/splashLeft.jpg"></a></li><!--
          --><li><a href="recipe.html"><img src="images/index/splashLeft_f2.jpg"></a></li><!--
          --><li><a href="recipe.html"><img src="images/index/splashLeft_f3.jpg"></a></li><!--
          --><li><a href="recipe.html"><img src="images/index/splashLeft_f4.jpg"></a></li><!--
          --><li><a href="recipe.html"><img src="images/index/splashLeft_f5.jpg"></a></li><!--
       --></ul>
    </div>
</div>
<div id="jCarouselLite2">
   <ul class="fade"><!--
      --><li><a href="concept.html"><img src="images/index/splashRight.jpg"></a></li><!--
      --><li><a href="concept.html"><img src="images/index/splashRight_f2.jpg"></a></li><!--
      --><li><a href="concept.html"><img src="images/index/splashRight_f3.jpg"></a></li><!--
      --></ul>
</div>

普段使用する際はjCarouselLite2に書いてあるように、ulをdivで囲みます
jCarouselLite1では「次へ、前へ」のボタンを設置し、それを画像の上に表示させる為、更にdivで囲みました
jCarouselLite1をrelativeに、anchorをabsoluteに指定しています
また、前回作成した.fadeで画像のロールオーバーも可能です

background-color: #FFF;
filter: alpha(opacity=70);
-moz-opacity:0.70;
opacity:0.70;

border-radius: 4px;         /* CSS3 */
-moz-border-radius: 4px;    /* Firefox */
-webkit-border-radius: 4px; /* Safari,Chrome */

初めの4行でボタンを白の半透明に、
後の3行で、（IEでは表示されませんが）ボタンを角丸にします。

初期読込み時に一瞬画像が全て表示されます。
気になるようでしたらulにoverflow: hidden;を指定するとよいかもめ_( :3」∠)_