今回は目標だったスライドショーをやっと作ることが出来たので、
それをご紹介（とゆうなの自分用メモ）したいと思います！
特別面白い動きはないですが、スライドショーとして欲しい機能は取り入れたつもりです！

このスライドショーのjsで出来ること

・画像がスライド出来る
・スライドする画像のサムネイルを設置することが出来る
・サムネイルをクリックorホバーしたらスライドが変わる（簡単にクリックorホバーを選ぶことが出来る）
・矢印ボタンでスライドさせられる
こんなものかと思います。

上記のことが出来ればたいていのスライドショーには対応できるかと思います！

実装方法

HTML

<div id="slideshow">
	<div id="slide">
		<div class="slide0"><img src="/stady/images/slideshow/slide0.jpg" alt=""></div>
		<div class="slide1"><img src="/stady/images/slideshow/slide1.jpg" alt=""></div>
		<div class="slide2"><img src="/stady/images/slideshow/slide2.jpg" alt=""></div>
		<div class="slide3"><img src="/stady/images/slideshow/slide3.jpg" alt=""></div>
	</div>

	<div id="thumbnail">
		<div class="slide0">●</div>
		<div class="slide1">●</div>
		<div class="slide2">●</div>
		<div class="slide3">●</div>
	</div>

	<div id="slideRight" class="moveSlide"> > </div>
	<div id="slideLeft"  class="moveSlide"> < </div>
</div>

id slide
の中にdivを配置して画像を並べます。
配置するdivにはかならずclassでslide0を与え、数字を増やして行って下さい。
id thumbnailとslideRight、slideLeftはサムネイル用のボックスと矢印のボックスなので
必要ない場合は消してもらって問題ありません！
使う場合はidとclassのつけ忘れにご注意下さい！
※つけ忘れると動きません！

CSS

#slideshow{
	width:640px;
	margin:50px auto 0;
	position:relative;
}
#slideshow #slide{
	width:100%;
	height:480px;
	position:relative;
}
#slideshow #slide div{
	display:none;
	position:absolute;
	left:0;
	top:0;
}
#slideshow #slide div img{
	width:100%;
}

#slideshow #thumbnail{
	margin-top:10px;
	text-align:center;
}
#slideshow #thumbnail div{
	display:inline-block;
	text-indent:-9999px;
	background:#ff0000;
	width:10px;
	height:10px;
	border-radius:4px;
	cursor:pointer;
}
#slideshow #thumbnail div.active{
	background:#000000;
}

#slideshow #slideRight,
#slideshow #slideLeft{
	height:50px;
	line-height:50px;
	font-size:50px;
	color:#ff0000;
	position:absolute;
	top:50%;
	margin-top:-50px;
	cursor:pointer;
}
#slideshow #slideRight{
	right:-50px;
}
#slideshow #slideLeft{
	left:-50px;
}

id slideにposition:relativeを与え、
中のdivに
・position:absolute;
・left:0;
・top:0;
・display:none;
を与えるだけで動くはずです！

JS（jQuer必要）

//----------------------------------------
//初期設定
var num               = 0;
var slideNum          = $("#slide div").length;
var slideIntervalID   = 0;
var slideCurrentIndex = 0;
var slideTime         = 5000; //スライドの感覚（1000 = 1秒）
var thumbnailAction   = "click";
//サムネイルとクリックしたときにスライドを変えたい場合は「click」
//サムネイルとホバーしたときにスライドを変えたい場合は「mouseover」にして下さい

//先頭の画像をフェードインさせる
$("#slide .slide0").fadeIn("slow");
$("#thumbnail .slide0").addClass("active");

//スライドショー開始
slideIntervalID = setInterval(moveSlide , slideTime);


//----------------------------------------
//スライドを次へ送る
//idx:あれば指定された番号のスライドを表示、なければ+1する
function moveSlide(idx) {
	//表示している画像と同じサムネイルをクリックしたときは処理しない
	if (idx == slideCurrentIndex) {
		return false;
	}

	//idxがundefindだった場合
	if (typeof idx === "undefined") {
		idx = Number(slideCurrentIndex) + 1;
	}

	//idxが最後までいった場合最初に戻す
	if (idx == slideNum) {
		idx = 0;
	}

	//slideCurrentIndexのスライドを隠す
	$("#slide .slide" + slideCurrentIndex).fadeOut("slow");
	$("#thumbnail .slide" + slideCurrentIndex).removeClass("active");

	//idxのスライドを表示する
	$("#slide .slide" + idx).fadeIn("slow");
	$("#thumbnail .slide" + idx).addClass("active");

	//slideCurrentIndexを更新する
	slideCurrentIndex = idx;
}


//----------------------------------------
//指定された数字にスライドする
function newSlideInterval(num) {
	//インターバルを止める
	clearInterval(slideIntervalID);
	
	//moveSlideにiを与えてスライドを再開
	moveSlide(num);
	slideIntervalID = setInterval(moveSlide , slideTime);
}


//----------------------------------------
//サムネイルをクリックorホバーしたらスライドする
$("#thumbnail div").bind(thumbnailAction , function() {
	var _this = $(this);

	//スライドさせる
	num = _this.attr("class").replace("slide" , "");
	newSlideInterval(num);
});


//----------------------------------------
//矢印をクリックしたらスライドを送る
$(".moveSlide").bind("click" , function() {
	//クリックされたボタンのIDで戻る進を判断する
	var moveDirection = $(this).attr("id").replace("slide" , "");

	if (moveDirection == "Right") {
		//右矢印をクリックした場合
		if (slideCurrentIndex == slideNum - 1) {
			num = 0;
		} else {
			num = slideCurrentIndex + 1;
		}
	} else {
		//左矢印をクリックした場合
		if (slideCurrentIndex == 0) {
			num = slideNum - 1;
		} else {
			num = slideCurrentIndex - 1;
		}
	}

	//スライドさせる
	newSlideInterval(num);
});

jQueryを読み込んだ後にこのjsをコピペすれば動くはずです！
コピーがめんどくさい方は、こちらを保存して下さい。
（ただ、MaMoTaKuがちょくちょくいじるかもしれないので、ダウンロードしたものがエラーを出してたら上記のコードをコピーして使って下さい、、、）
上の行に書いてある
・slideTimeがスライドショーの感覚
・thumbnailActionがサムネイルをクリックorホバーした時にアクションするのを決める関数
を変えてあげるとお好みの動作に近づくかもしれません！

MaMoTaKuが作ったDEMOを置いておくので動作の確認をどうぞ！
（やっとそれっぽいブログになってきたな笑）