読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【javascript】タイマー処理をつかったスライドショー


slide

html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>
<img id="gazou" src="img/img1.jpg" alt="potato">
</p>
<button id="play">play</button>
<button id="stop">stop</button>
<script type="text/javascript" src="script/slide1.js"></script>
</body>
</html>

javascript

var play_button = document.getElementById('play');
var stop_button = document.getElementById('stop');
var gazou = document.getElementById('gazou');
var img = ['img1','img2','img3'];
var num = 1;
var time_id = null;
var i = 0;

play_button.addEventListener("click", timer_set, false);
stop_button.addEventListener("click", stop, false);

function play(){
    gazou.src = 'img/' + img[num] + '.jpg';
    num++;
    num %= img.length;
    time_id = setTimeout(play,1000);
    i ++;
}
function stop(){
    clearTimeout(time_id);
    time_id = null;
}

function timer_set(){
    if(time_id === null){
    play();
    }
}