[jQuery]Flashのように画像やテキストを切り替えるs3Slider.js

[jQuery]Flashのように画像やテキストを切り替えるs3Slider.js

以前コリスさんで紹介されていて知ったのですが、s3Sliderはフラッシュのように画像やテキスト切り替えてくれるスクリプトです。

動きもスムーズですし、テキストも上下左右から表示する事が出来るのでけっこう使い道はありそうなので詳しく解説しておきたいと思います。

demo page

…ここからが続き

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

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;
}

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

Comments

no name

no name

突然ですが、DEMOページにマルウェアと思われるコードが記述されてようです。

2008年12月25日 21:14

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article