rainyjune/slide.html

## slide.html
<!DOCTYPE html>
<html>
    <head>
        <title>Window onload event</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>TODO write content</div>
        <img src="1.jpg" alt="1.jpg" width="200" height="200" id="pic"><br>
        <script src="slide.js"></script>
    </body>
</html>

## slide.js
var fn =(function () {
    var imgs = ['1.jpg','2.jpg','3.jpg'];
    var idx = 0;
    var midx = imgs.length - 1;
    return function(direction){
        console.log('fire');
        idx = idx + direction;
        if (idx > midx) {
            idx = 0;
        }
        if (idx < 0) {
            idx = midx;
        }
        document.getElementById('pic').src = imgs[idx];
    };
})();

document.onkeydown = keyHit;

function keyHit(evt) {
    var lftArrow = 37;
    var rgtArrow = 39;
    if (evt) {
        var thisKey = evt.which;
    } else {
        var thisKey = window.event.keyCode;
    }
    if (thisKey === lftArrow) {
        console.log('left');
        fn(-1);
    } else if (thisKey === rgtArrow) {
        console.log('right');
        fn(1);
    }
    return false;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Window onload event</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
	<div>TODO write content</div>
	<img src="1.jpg" alt="1.jpg" width="200" height="200" id="pic"><br>
	<script src="slide.js"></script>
	</body>
	</html>
	var fn =(function () {
	var imgs = ['1.jpg','2.jpg','3.jpg'];
	var idx = 0;
	var midx = imgs.length - 1;
	return function(direction){
	console.log('fire');
	idx = idx + direction;
	if (idx > midx) {
	idx = 0;
	}
	if (idx < 0) {
	idx = midx;
	}
	document.getElementById('pic').src = imgs[idx];
	};
	})();

	document.onkeydown = keyHit;

	function keyHit(evt) {
	var lftArrow = 37;
	var rgtArrow = 39;
	if (evt) {
	var thisKey = evt.which;
	} else {
	var thisKey = window.event.keyCode;
	}
	if (thisKey === lftArrow) {
	console.log('left');
	fn(-1);
	} else if (thisKey === rgtArrow) {
	console.log('right');
	fn(1);
	}
	return false;
	}