jQuery を使ったスライドショー
webサイトにスライドショーを実装します。
まずはサンプルをご覧ください。↓
5枚の写真が、3秒ごとに入れ替わります。滑らかな仕上がりになっているのがご確認できるかと思います。
jQueryライブラリの読み込み
jQueryを使って実装していきます。コピペで使えるので簡単です！
まずは、jQueryライブラリを読み込みます。
GoogleのCDNにホストされているjQueryのファイルを読み込みます。
↓ こちらのコードを、<head>タグ内に記述します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>たった1行です！
様々な読み込み方法を試しましたが、この方法がおすすめです！
スライドショーのサンプルコード
↓ このコードを<body>タグの中に記述します。
<script>
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> 外部ファイルで読み込むこともできますが、
今回は分かりやすくするために直接記述にしてあります。
以下のコードですが、「3000」というのは3000ミリ秒なので、
3秒ごとに写真が入れ替わる設定です。5秒にしたい場合は「5000」に
設定するなどしてください。
$(function() {
setInterval( "slideSwitch()",3000 );
});スライドショー用の画像を列挙するHTMLを記述
↓ このコードを<body>タグ内に記述します。
<div id="slideshow">
<img src="sample1.jpg" class="active">
<img src="sample2.jpg">
<img src="sample3.jpg">
<img src="sample4.jpg">
<img src="sample5.jpg">
</div>スライドショーとして表示したい画像を列挙します。
お持ちの画像ファイル名を記述してください。
分かりやすくするため、「sample1」～「sample5」にしてあります。
↓ ここで重要なのが、idでslideshow指定がしてあるのと、
「sample1」のclass のactive指定です。
<div id="slideshow">
<img src="sample1.jpg" class="active">ここを変えてしまうと、CSSが反映されませんのでご注意を。
スライドの挙動を調整するCSSを記述
CSSは外部ファイルでも指定できますが、
今回は分かりやすくするため、下記のコードを<body>タグ内に記述します。
<style>
#slideshow {
position: relative;
overflow : hidden;
width: 510px; /* 画像の横幅に合わせて記述 */
height: 360px; /* 画像の高さに合わせて記述 */
margin : 30px auto;
background : #f2f2f2;
border: solid 1px gray;
}
#slideshow img {
position: absolute;
z-index: 8;
opacity: 0.0;
width : inherit;
height : inherit;
}
#slideshow img.active {
z-index: 10;
opacity: 1.0;
}
#slideshow img.last-active {
z-index: 9;
}
</style>↓ active指定をした1枚目の画像が、1番上に来るようになっており、
透過せずはっきり見えます。
#slideshow img.active {
z-index: 10;
opacity: 1.0;
}slideshow idですが、上下のmarginを30px, 左右のmarginをautoに
設定してあるので、
画像が真ん中に来るようになっており、上から30px下がっています。
背景色や、外枠もお好みで変えましょう。
画像の大きさに合わせて、widthとheightを調整してください。↓
#slideshow {
position: relative;
overflow : hidden;
width: 510px; /* 画像の横幅に合わせて記述 */
height: 360px; /* 画像の高さに合わせて記述 */
margin : 30px auto;
background : #f2f2f2;
border: solid 1px gray;
}いかがでしたか？
簡単で、コードも短くシンプルです。
jQueryを使ったスライドショーを是非実装してみてください。
HTMLとCSSだけ！というスライドショーもよく見かけますが、
IEでanimationプロパティが動かなかったりと、様々な問題が出てきますので、
スライドショーの実装はjQueryがおすすめです！
コメント