jQueryのスライドショーですが、単純にただスライドさせるだけだったら、以下のソースだけで動いてしまいます。大変便利。
ソースはこちらから。
ソースはこちらから。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 4000 );
});
</script>
<!-- CSS -->
<style type="text/css">
#slideshow { position:relative; width:320px; height:240px; }
#slideshow img { position:absolute; top:0; left:0; z-index:8; }
#slideshow img.active { z-index:10; }
#slideshow img.last-active { z-index:9; }
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照：<a href='http://jonraasch.com/blog/a-simple-jquery-slideshow'>A Simple jQuery Slideshow</a></p>
<p>▼画像がフェードしながら切り替わります。</p>
<!-- CODE -->
<div id="slideshow">
<img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" alt="" />
<img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" alt="" class="active" />
<img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" alt="" />
</div>
<!-- / CODE -->
</div>
</body>
</html>
