…ここからが続き

s3Slider.js使い方・ダウンロード

• s3Slider.jsダウンロード
• s3Slider jQuery pluginのデモページ

Full version (with examples) (size: 574kb)と書かれている部分でデモページをまる事ダウンロード。
Uncompressed version (size: 4.12kb)でs3Slider.jsのみをダウンロードしてきます。

headタグ内

<script type="text/javascript" src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript" defer="defer" src="js/alphafilter.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
    });
	$(document).ready(function() {
        $('#slider1').s3Slider({
            timeOut: 4000
        });
    });
</script>

※alphafilter.jsは透過PNGを使っている為使っています。
詳しくは透過PNGをIE6以下で表示させる方法をご覧下さい。

timeOut: 3000やtimeOut: 4000と記述されている数字を少なくすると、表示、切り替えの時間が短くなります。自分の好みの数字に変更したらよいと思います。

画像の上下にスライドテキストが出てくるサンプルの解説

<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
    <a href="#header"><img src="image/photo_01.jpg" alt="" width="870" /></a>
    <span class="top alphafilter"><strong>夕方</strong><br />ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></li>
<li class="sliderImage">
    <a href="#header"><img src="image/photo_02.jpg" alt="" width="870" /></a>
    <span class="bottom alphafilter"><strong>夕暮れ</strong><br />ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></li>
<li class="sliderImage">
    <a href="#header"><img src="image/photo_03.jpg" alt="" width="870" /></a>
    <span class="top alphafilter"><strong>夜</strong><br />ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</span></li>
</ul>
<!--/ #slider--></div>

この用にli要素が上から順番に表示されるようになっているんです。後imgの前についてリンク要素はあってもなくても大丈夫です。
※liについてclass名は取ったら動かないですよ。

#slider {
	height: 409px;
	position: relative;
	margin-bottom: 50px;
}
#slider #sliderContent {
	width: 870px;
	position: absolute;
	top: 0;
	background: url(../images/bg_image.gif) repeat;
	padding: 7px;
	border: 3px solid #606060;
}
#sliderContent li	{
	position: relative;
	display: none;
	color: #FFF;
}

#slider　#sliderContentの要素で、動きのあるエリアの領域の指定やデザインをつけ加えて下さい。

#slider #sliderContent li span	{
	width: 840px;
	position: absolute;
	padding: 10px 15px;
	background: url(../images/bg.png) repeat;
	display: none;
}
.sliderImage span strong {
	font-size: 116.6%;
}

ここが画像の上にのるテキストエリアのデザイン要素になります。横幅を指定するのを忘れないようにしましょう。

.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
	left: 0;
}

これは上部にテキスト表示したい場合と下部にテキストを表示したい場合の記述です。

.left {
	top: 0;
    left: 0;
	width: 110px;
	height: 453px;
}
.right {
	right: 0;
	bottom: 0;
	width: 90px;
	height: 453px;
}

左右に表示させたい場合は、横幅の指定と縦の指定を忘れないよに記述しておきましょう。