サンプル
◆html
1行目：HTML5であることを宣言
6行目：
jQueryを読み込む。
7行目：
slideshowImgInHtml.js を読み込む。
24-30行目：
スライドショーを構成する部分
24行目：
div要素、id="slideshow" とする。
data-interval="3000"：切り替え間隔を3000msに設定
data-animate-time="500"：切り替え時のアニメーションの時間を500msに設定
25-29行目：
画像ファイルとキャプションを設定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SlideShow</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slideshowImgInHtml.js"></script>
<style>
#slideshow {
width:800px;
margin:0 auto;
text-align: center;
}
#slideshow p {
font: bold 16px arial,sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div id="slideshow" data-interval="3000" data-animate-time="500">
<div><img src="http://farm6.static.flickr.com/5052/5503321609_d9e9571af9_z.jpg"/><p>いすみ鉄道</p></div>
<div><img src="http://farm6.static.flickr.com/5013/5546595586_6f6966e6ca_z.jpg"/><p>いすみ（蛍）</p></div>
<div><img src="http://farm6.static.flickr.com/5263/5616428686_82610176c3_z.jpg"/><p>飯給</p></div>
<div><img src="http://farm6.static.flickr.com/5251/5503249326_6b1c255324_z.jpg"/><p>いちはら市民の森</p></div>
<div><img src="http://farm6.static.flickr.com/5136/5546824600_af97b41fe5_z.jpg"/><p>君ヶ浜から見た犬吠崎灯台</p></div>
</div>
</div>
</body>
</html>
◆javascript(slideshowImgInHtml.js)
1-3行目：
ページを読み込んだ時に実行する関数。関数 slideShow を実行する。
6-52行目：関数 slideShow()
スライドショーを実行する。
8-9行目：
スライドショーの切り替え間隔（interval）と切り替え時のアニメーションの時間（animateTime）の
初期値を設定
11-15行目：
html で設定したdata-interval, data-interval の値を interval, animateTime に代入。
data-interval, data-interval がなければ、初期値の値を使う。
17-22行目：
子要素 div のスタイルを設定する。（position: "absolute" を指定しないと、
スライドショーが切り替わるたびに表示位置がずれてしまう。）
24-29行目：
子要素 div の最初の要素を active 、不透明にする（表示する）。
31行目：
一定期間（interval）ごとに関数 slideSwitch()を実行する。
33-50行目：関数 slideShow() のインナー関数 slideSwitch()
active な要素を透明にアニメーションして、次の要素を不透明にアニメーションする。
アニメーション時間は animateTime。
ローカル変数 animateTime を使えるようにインナー関数にしてある。
（なぜか、function slideSwitch() { } では、関数が定義されない。
31行目の setInterval でエラーが発生する。）
35-40行目：
active な要素を $active に代入する。active な要素の次の要素を $next に代入する。
次の要素がなければ（active な要素が最後の要素なら）、最初の要素を $next に代入する。
42-47行目：
$next に代入された要素をアニメーションで不透明にする（表示する）。
active な要素を active でなくす。
48行目：
$active に代入された要素をアニメーションで透明にする（非表示にする）。
ページを読み込んだ時に実行する関数。関数 slideShow を実行する。
6-52行目：関数 slideShow()
スライドショーを実行する。
8-9行目：
スライドショーの切り替え間隔（interval）と切り替え時のアニメーションの時間（animateTime）の
初期値を設定
11-15行目：
html で設定したdata-interval, data-interval の値を interval, animateTime に代入。
data-interval, data-interval がなければ、初期値の値を使う。
17-22行目：
子要素 div のスタイルを設定する。（position: "absolute" を指定しないと、
スライドショーが切り替わるたびに表示位置がずれてしまう。）
24-29行目：
子要素 div の最初の要素を active 、不透明にする（表示する）。
31行目：
一定期間（interval）ごとに関数 slideSwitch()を実行する。
33-50行目：関数 slideShow() のインナー関数 slideSwitch()
active な要素を透明にアニメーションして、次の要素を不透明にアニメーションする。
アニメーション時間は animateTime。
ローカル変数 animateTime を使えるようにインナー関数にしてある。
（なぜか、function slideSwitch() { } では、関数が定義されない。
31行目の setInterval でエラーが発生する。）
35-40行目：
active な要素を $active に代入する。active な要素の次の要素を $next に代入する。
次の要素がなければ（active な要素が最後の要素なら）、最初の要素を $next に代入する。
42-47行目：
$next に代入された要素をアニメーションで不透明にする（表示する）。
active な要素を active でなくす。
48行目：
$active に代入された要素をアニメーションで透明にする（非表示にする）。
$(function() {
slideShow();
});
function slideShow() {
var interval = 3000;
var animateTime = 1000;
var $slideshow = $('#slideshow');
var $interval = $slideshow.data('interval');
if($interval) interval = Number($interval);
var $animateTime = $slideshow.data('animate-time');
if($animateTime) animateTime = Number($animateTime);
$('#slideshow div').each(function(){
$(this).css({
position: "absolute", // ボックスの配置を絶対位置に設定する。
opacity: 0.0 // div要素の透過度を0.0（透明）に設定する。
});
});
$('#slideshow div:first')
.addClass('active') // 最初の要素をactiveに設定する。
.css({
opacity: 1.0 // div要素の透過度を1.0（不透明）に設定する。
})
;
setInterval( "slideSwitch()", interval ); // slideSwitch()を時間intervalごと繰り返す。
slideSwitch = function() {
var $active = $('#slideshow div.active');
if ($active.next().length) {
$next = $active.next(); // activeな要素の次の要素を$nextに定義
} else {
$next = $('#slideshow div:first'); // nextがなければ最初の要素を$nextに定義
}
$next
.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, animateTime, function() { // 次の要素の透過度を1.0にアニメーションする。
$active.removeClass('active'); // activeな要素からclass='active'を削除
});
$active.animate({opacity: 0.0}, animateTime, function() {}); // 今の要素の透過度を0.0にアニメーションする。
}
}
参考にしたページ
スライドショー作り方（A Simple jQuery Slideshow）以上
