jQuery でスライドショー 2010.01.15記

Simple slideshow with jQuery

• 1
• 2
• 3

HTML

<div class="slideshow">
	<ul class="recentlist">
		<li><a class="current" href="#slide1">1</a></li>
		<li><a href="#slide2">2</a></li>
		<li><a href="#slide3">3</a></li>
	</ul>
	<img id="slide1" src="./files/20100115/s1.jpg" alt="オアシス21" />
	<img id="slide2" src="./files/20100115/s2.jpg" alt="瑠璃光橋あたり" />
	<img id="slide3" src="./files/20100115/s3.jpg" alt="お茶の水" />
</div>

ヘッダ JavaScript

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript">
$(function() {
	var imgWrapper = $('.slideshow > img');
	// only show the first image, hide the rest
	imgWrapper.hide().filter(':first').show();
	
	$('ul.recentlist li a').click(function () {
		// check if this item doesn't have class "current"
		// if it has class "current" it must not execute the script again
		if (this.className.indexOf('current') == -1){
			imgWrapper.hide();
			imgWrapper.filter(this.hash).fadeIn(500);
			$('ul.recentlist li a').removeClass('current');
			$(this).addClass('current');
		}
		return false;
	});
});
</script>

CSS

<style type="text/css" media="screen">
.slideshow { 
	position: relative; 
	background: #fafafa; 
	width: 406px; 
	height: 350px; 
	border: 1px solid #e5e5e5; 
	margin-bottom: 20px; 
}
.slideshow img { 
	position: absolute; 
	top: 3px; 
	left: 3px; 
	z-index: 10; 
	background: #fff; 
}
ul.recentlist { 
	position: absolute; 
	bottom: 12px; 
	right: 4px; 
	list-style: none; 
	z-index: 20; 
}
ul.recentlist li { display: inline; }
ul.recentlist li a, ul.recentlist li a:visited { 
	display: block; 
	float: left; 
	background: #e5e5e5; 
	padding: 4px 8px; 
	margin-right: 1px; 
	color: #000; 
	text-decoration: none; 
	cursor: pointer; 
}
ul.recentlist li a:hover, ul.recentlist li a:visited:hover { 
	background: #666; 
	color: #fff; 
}
ul.recentlist li a.current { 
	background: #f00; 
	color: #fff; 
}
</style>