homework01.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			#adv {
				width: 940px;
				margin: 0 auto;
			}
			#adv ul {
				width: 120px;
				height: 30px;
				margin: 0 auto;
				position: relative;
				top: -30px;
			}
			#adv li {
				width: 30px;
				height: 30px;
				list-style: none;
				float: left;
				color: #ccc;
				cursor: pointer;
			}
			#adv li:first-child {
				color: lightseagreen;
			}
		</style>
	</head>
	<body>
		<div id="adv">
			<img src="img/slide-1.jpg" alt="">
			<ul>
				<li class="dot">●</li>
				<li class="dot">●</li>
				<li class="dot">●</li>
				<li class="dot">●</li>
			</ul>
		</div>
		<script>
			var img = document.querySelector('#adv>img');
			var items = document.querySelectorAll('#adv li');
			var timerId = 0;
			
			for (var i = 0; i < items.length; i += 1) {
				items[i].index = i;
				items[i].addEventListener('mouseover', function(evt) {
					index = evt.target.index;
					changeItemsColor(index);
					img.src = 'img/' + images[index];
					if (timerId != 0) {
						window.clearInterval(timerId);
						timerId = 0;
					}
				});
				items[i].addEventListener('mouseout', startIt);
			}
			
			var images = ['slide-1.jpg', 'slide-2.jpg', 'slide-3.jpg', 'slide-4.jpg'];
			var index = 0;
			
			startIt();
			
			function startIt() {
				if (timerId == 0) {
					timerId = window.setInterval(function() {
						index += 1;
						index %= images.length;
						changeItemsColor(index);
						img.src = 'img/' + images[index];
					}, 2000);
				}
			}
			
			function changeItemsColor(index) {
				for (var i = 0; i < items.length; i += 1) {
					items[i].style.color = '#ccc';
				}
				items[index].style.color = 'lightseagreen';
			}
		</script>
	</body>
</html>