jQuaryを使って、画像をスライドショー形式で変化させてみましょう。
ちなみに、画面幅に応じて画像のサイズが変わるようにしてあります。
完成形↓ トップページの画像がスライドショーになっています。
（http://rsfgame.webcrow.jp/index.html）
画像のスライドショー部分はこのような感じで記述しています。
＜HTML＞
<!DOCTYPE html>
<html>
<head>
<!-- CSSを読み込む -->
<link rel="stylesheet" href="pc.css" type="text/css">
<!-- jQuery導入 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<!-- ここから実際に表示する部分です。imgのリンクを変更して下さい -->
<div class="visual">
<p id="slideshow">
<img src="1.jpg" style="width:100%;" class="active">
<img src="2.jpg" style="width:100%;">
<img src="3.jpg" style="width:100%;">
</p>
</div>
<!-- ここまで実際に表示する部分です。 -->
<!--以下はスライドショーのスクリプトです。/body(終了)の前に置いてください-->
<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()", 3000 );
});
</script>
</body>
</html>
＜CSS＞
/*ここからトップスライド画像のデザイン部分です*/
div.visual{
margin:20px;
padding:5px;
max-width:800px;
max-height:500px;
}
#slideshow {
position: relative;
max-width: 800px; /* 画像の横幅に合わせて記述 */
height: 450px; /* 画像の高さに合わせて記述 */
}
#slideshow img {
position: absolute;
top: 0;
left:0;
z-index: 8;
opacity: 0.0;
}
#slideshow img.active {
z-index: 10;
opacity: 1.0;
}
#slideshow img.last-active {
z-index: 9;
}
/*ここまでトップスライド画像*/
以上です。
ありがとうございました。
0コメント