［JS］自動スクロールスライドショーするタブ式メニュー
デモページ
自動に横にスライドショースクリプトなのでけっこういろんな応用がきくと思います。
自分の方では画像をスライドさせるサンプルを作ってみたので参考にして下さい。
slideshow.js 使い方、解説
Build an Auto-Scrolling Slideshow That Works With and Without JavaScriptのSourceからファイルを一式ダウンロード出来ます。
head内
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
XHTML
<div id="slideshow">
<ul class="slides-nav">
<li class="on"><a href="#slide-one">メニュー 1</a></li>
<li><a href="#slide-two">メニュー 2</a></li>
<li><a href="#slide-three">メニュー 3</a></li>
</ul>
<div class="slides">
<ul>
<li id="slide-one"><img src="image/001.jpg" alt="" width="300" height="200" /><img src="image/002.jpg" alt="" width="300" height="200" /></li>
<li id="slide-two"><img src="image/003.jpg" alt="" width="300" height="200" /><img src="image/004.jpg" alt="" width="300" height="200" /></li>
<li id="slide-three"><img src="image/005.jpg" alt="" width="300" height="200" /><img src="image/006.jpg" alt="" width="300" height="200" /></li>
</ul>
</div>
</div>
気を付ける点としては、.slides-navから指定するリンク先と#slidesのli内に指定するID名を一緒にする事。
.slides-navの該当するページの場合はclass="on"とつくようになっているので、ここはCSSの方で指定しておきます。
CSS
#slideshow .slides-nav li {
float: left;
margin-right: 5px;
}
#slideshow .slides-nav li a {
display: block;
overflow: hidden;
background: url(image/btn.gif) no-repeat;
width: 10px;
height: 10px;
text-indent: -9999px;
}
#slideshow .slides-nav:after { height:0; visibility: hidden; content: "."; display: block; clear: both; }
.js #slideshow .slides-nav li.on,
.js #slideshow .slides-nav li.on a {
background: url(image/btn_on.gif) no-repeat;
}
お疲れ様です！もし同じような境遇の人の為にも公開しておきますね～
2010年03月02日 16:07