jQuery でスライドショー 2010.01.15記

  戻る

jQuery Cycle Plugin

  http://www.malsup.com/jquery/cycle/

fade

zoom

scrollDown

shuffle

HTML

<h3>fade</h3>
<div class="slideshow ss_style"></div>

<h3>zoom</h3>
<div class="slideshow2 ss_style"></div>

<h3>scrollDown</h3>
<div class="slideshow3 ss_style"></div>

<h3>shuffle</h3>
<div class="slideshow4 ss_style"></div>

<div style="slide_img">
	<img src="./files/20100115/g1.jpg" width="550" height="200" />
	<img src="./files/20100115/g2.jpg" width="550" height="200" />
	<img src="./files/20100115/g3.jpg" width="550" height="200" />
	<img src="./files/20100115/g4.jpg" width="550" height="200" />
	<img src="./files/20100115/g5.jpg" width="550" height="200" />
</div>

ヘッダ JavaScript

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="/common/cycle/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var imgHtml = $('#slide_img').html();
	$('.ss_style').html(imgHtml);
	$('.slideshow').cycle({
		fx: 'fade' 
	});
	$('.slideshow2').cycle({
		fx:    'zoom',
		sync:  false,
		delay: -2000
	});
	$('.slideshow3').cycle({
		fx: 'scrollDown' 
	});
	$('.slideshow4').cycle({
		fx:    'shuffle', 
		delay: -4000 
	});
});
</script>

ここでは、ｊQuery は Google AJAX Libraries API を利用してロードしています。

CSS

<style type="text/css" media="screen">
.ss_style { 
	height: 232px; 
	width: 582px; 
}
.ss_style img { 
	padding: 15px; 
	border: 1px solid #ccc; 
	background-color: #eee; 
}
#slide_img {
	display:none;
}
</style>

当サイトで表示できるように調整しました