コピペだけで複数の画像をふわっと差し替え表示させる方法

画像が差し替わるホームページ

ワードプレスには便利なプラグインがたくさん用意されていて、プラグインを有効化するだけで、あっという間にお洒落な画像メインのサイトが作れてしまいます。

ところが、ホームページビルダーでホームページを作った人は、なかなかそうはいきません。

今回は、同じページ内で複数枚の画像がふわっと差し替わる演出方法を紹介します。

コピペする

まず、以下を<head>～</head>内に以下をコピペします。

<!– =========================== –>
<!– ▼スライドショーのためのCSS –>
<!– =========================== –>
<style type=”text/css”>
#slideshow {
position: relative;
width: 900px;
height: 221px;
}

#slideshow p {
position: absolute;
top: 0;
left: 0;
z-index: 8;
opacity: 0.0;
background-color: white;
margin: 0;
height: 221px;
}

#slideshow p.active {
z-index: 10;
opacity: 1.0;
}

#slideshow p.last-active {
z-index: 9;
}

#slideshow p img {
width: 900px;
height: 221px;
display: block;
border: 0;
margin-bottom: 10px;
}
</style>

<!– ================= –>
<!– ▼jQuery 読み込み –>
<!– ================= –>
<script type=”text/javascript” src=”./jquery-1.9.1.min.js”></script> <!– ※自サイト上にアップロードしてある場合は、下の行をコメントアウトし、こちらの行を有効にして下さい。 –>
<!–<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.9.1.min.js”></script> –><!– ※CDNを利用する場合は、上の行をコメントアウトし、こちらの行を有効にして下さい。 –>

<!– ========================================== –>
<!– ▼ふわっと切り替えるスクリプト(jQuery利用) –>
<!– ========================================== –>
<script type=”text/javascript”>

function slideSwitch() {
var $active = $(‘#slideshow p.active’);

if ( $active.length == 0 ) $active = $(‘#slideshow p:last’);

var $next = $active.next().length ? $active.next()
: $(‘#slideshow p: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()”, 5100 );
});

</script>
<!–
※Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.
–>

＜ここまで＞

ちなみに、ここの部分でスライドの時間を調整しています。

$(function() {
setInterval( “slideSwitch()”, 5100 );
});

5100でだいたい4～5秒で画像がスライドします。

そして、<body>～</body>内に以下をコピペします。

<!– ================================== –>
<!– ▼スライドショーとして表示する画像 –>
<!– ================================== –>
<div id=”slideshow”>
<p class=”active”>
<a href=”./”><img src=”img/top_img1.jpg” alt=”” class=”active”></a>
</p>
<p>
<a href=”./”><img src=”img/top_img2.jpg” alt=””></a>
</p>
</div>

画像の名前は、top_img1.jpgとtop_img2.jpgの2枚だけですが、もっと多くの

画像をスライドショーとして表示可能です。

その時は、

これを複数コピペして、画像ファイル名を増やすだけです。

ちなみにimgフォルダを作って画像はそこに入れて管理すると更新が簡単です。