スライド

JavaScript 自習

タイマー(setInterval)でスライド


今回は基礎から離れてタイマーを使ってみました。
実物へのリンク

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>タイマーでスライド</title>
    <script type="text/javascript">
	var i = 1;
	function slide() {
		i++;
		if (i == 6) {
			i=1;
		}
		document.getElementById( 'img').src = 'img/flower' + i +  '.jpg';
	}
	</script>
    <style type="text/css">
	body {
		width: 400px;
		margin: 0 auto;
		text-align: center;
	}
	</style>
</head>
<body>
<p><img id="img" src="img/flower1.jpg" ></p>
<input type="button" value="スライドを見る" onClick="show = setInterval( 'slide()', 2000)">
<input type="button" value="停止" onClick="clearInterval(show)">	
</body>
</html>

次回から、また基礎に戻ります。