…ここからが続き

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" /><img src="image/002.jpg" alt="" width="300" /></li>
<li id="slide-two"><img src="image/003.jpg" alt="" width="300" /><img src="image/004.jpg" alt="" width="300" /></li>   
<li id="slide-three"><img src="image/005.jpg" alt="" width="300" /><img src="image/006.jpg" alt="" width="300" /></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;
}