JQueryで自動スライドできるJavaScriptです。
3秒間放置で写真がスライドします。
ボタンをクリックすることでスライドさせることも可能です。

↓以下が実際のソースサンプルです。

▼JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script>
$(function(){
	//ページングの設定
	$("#slide li").each(function(){
		$("#paging").append($("<li></li>").attr("data-img",$("img",this).attr("src")));
	});
	$("#paging li:first-child").addClass("active");
	
	//自動スライドの実行
	var timerId = setInterval(function(){
		$("#nav .next").click();
	},1500);

	//自動スライドの制御
	$("#slideGalley").hover(function(){
		$("#nav").show();
		clearInterval(timerId);
	},function(){
		$("#nav").hide()
		timerId = setInterval(function(){
			$("#nav .next").click();
		},1500);
	});

	//右矢印ボタンが押された際の挙動
	$("#nav .next").click(function(){
		$("#slide:not(:animated)").animate({
			"margin-left" : -1*$("#slide li").width()
		},function(){
			$("#slide").css("margin-left","0").append($("#slide li:first-child"));
			$("#paging li.active").removeClass("active");
			$("#paging li[data-img='"+$("#slide li:first-child img").attr

("src")+"']").addClass("active")
		});
	});

	//左矢印ボタンが押された際の挙動
	$("#nav .prev").click(function(){
		$("#slide:not(:animated)")
			.css("margin-left",-1*$("#slide li").width())
			.prepend($("#slide li:last-child"))
			.animate({
			"margin-left" : 0
		},function(){
			$("#paging li.active").removeClass("active");
			$("#paging li[data-img='"+$("#slide li:first-child img").attr

("src")+"']").addClass("active")
		});
	});
});
		</script>

▼CSS

test@charset "utf-8";
/* Baselayout Style */
ul#menu{
	width:800px;
	margin:0;
	padding:0;
}
*{
	margin:0px;
	padding:0px;
	list-style-type:none;
	}
#container{
	margin:20px auto;
	width:800px;
}
ul.sub{
	display:none;
}
ul.menu:after {
	height:0;
	visibility:hidden;
	display:block;
	clear:both;
}
#container{
	width:800px;
	margin:0px auto;
}
#slideGalley{
	width:800px;
	position: relative;
	overflow:hidden;
}
#slide{
	width:2400px;
}
#slide li{
	float:left;
}
#paging{
	text-align: center;
	position: absolute;
	width:100%;
	bottom:10px;
}
#paging li{
	display: inline-block;
	*display: inline;
	*zoom:1;
	width:20px;
	height:20px;
	background: url(./image/page.png);
}
#paging li.active{
	background: url(./image/page_active.png);
}
#nav{
	display: none;
}
#nav .prev{
	position: absolute;
	left:10px;
	top:50%;
	margin-top:-50px;
}
#nav .next{
	position: absolute;
	right:10px;
	top:50%;
	margin-top:-50px;
}
	

▼HTML

	<div id="container">
	<div id="slideGalley">

	<ul id="slide">
	<li><a href="/image/a1.jpg"><img src="image/a1.jpg" width="800" /></a></li>
	<li><a href="/image/a2.jpg"><img src="image/a2.jpg" width="800" /></a></li>
	<li><a href="/image/a3.jpg"><img src="image/a3.jpg" width="800" /></a></li>
	</ul>
		<div id="nav"> <img src="./image/nav_prev.png" class="prev" /> 
		<img src="./image/nav_next.png" class="next" /> </div>
		    <ul id="paging">
	        </ul>
	     </div>
	　</div>

デモページは、こちら