【JavaScript】スライドショーの作り方

スポンサーリンク

JavaScriptでスライドショーを作ってみました。
画像下に表示されている「<< 前」「次 >>」をクリックすると画像が切り替わります。
サンプルコードも掲載していますのでご自由にアレンジして使ってください。

動作サンプル

htmlファイル

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スライドショー</title>

<script type="text/javascript" src="sample02.js"></script>

<style>

    #slide {
        width: 210px;
        height: 300px;
    }
    
    #up {
        border: solid 1px silver;
    }
    
    #down {
        padding-top: 5px;
        text-align: center;
    }
    
    #pre, #next {
        
        cursor: pointer;  /* マウスカーソルをポインタにする */
        font-weight: bold;
        text-decoration: underline;  /* 下線 */
    }
    
    #number {
        font-weight: bold;
        margin-left: 10px;
        margin-right: 10px;
    }
    
</style>
</head>

<body>

<div id="slide">
    <div id="up">
        <img id="main_image" src="img/image0.png">
    </div>
    <div id="down">
        <span id="pre">&lt;&lt; 前</span>
        <span id="number">1 / 5</span>
        <span id="next">次 &gt;&gt;</span>
    </div>
</div>


</body>
</html>

JavaScriptファイル


// 画像用配列
var images = [
    'img/image0.png',
    'img/image1.png',
    'img/image2.png',
    'img/image3.png',
    'img/image4.png'
    ];

// 現在の画像番号
var imgNumber = 0;


window.onload = function() {
    
    var i = 0;

    for (i = 0; i < images.length; i++){
        // 画像プリロード
        getImage(images[i]);
    }
    
    // 前  のイベントリスナー
    var pre = document.getElementById('pre');
    pre.addEventListener("click", function() {
        changeImage(-1); 
    }, false);
    
    // 次 のイベントリスナー
    var next = document.getElementById('next');
    next.addEventListener("click", function() {
        changeImage(1); 
    }, false);
}

// 画像プリロード用関数
function getImage(file){
    
    var img = document.createElement('img');
    img.src = file;
    
}

// 画像変更
function changeImage(para){
    
    // 次への場合
    if (para == 1){
        imgNumber ++;
        if (imgNumber >= images.length){
            // 最初に戻る
            imgNumber = 0;
        }
        
    // 前への場合
    }else{
        imgNumber --;
        if (imgNumber < 0){
            // 最後に戻る
            imgNumber = images.length - 1;
        }
    }
    
    // 画像変更
    var img = document.getElementById('main_image');
    img.src = images[imgNumber];
    
    // 画像番号情報変更
    var num = imgNumber + 1;
    var str = num + ' / ' + images.length;
    var n = document.getElementById('number');
    n.innerHTML = str;
    
}

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト