zhensolid
/
Python-100-Days


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播广告</title>
		<style>
			#adv {
				width: 600px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="adv">
			<img src="images/slide-1.jpg" width="600" alt="">
		</div id="adv">
		<script>
			// document.getElementById('标识') ---> HTMLElement [!]
			// document.getElementsByTagName('标签名') ---> NodeList
			// document.getElementsByClassName('类名') ---> NodeList
			// document.querySelector('样式表选择器') ---> HTMLElement [!]
			// document.querySelectorAll('样式表选择器') ---> NodeList [!]
			// firstChild / lastChild / children --- 获取子节点
			// parentNode --- 获取父节点
			// previousSibling / nextSibling --- 获取兄弟
			const img = document.querySelector('#adv>img')
			const imageNames = ['slide-1', 'slide-2', 'slide-3', 'slide-4']
			var imageIndex = 0
			function switchImage() {
				imageIndex += 1
				imageIndex %= imageNames.length
				img.src = 'images/' + imageNames[imageIndex] + '.jpg'
			}
			var timerId = setInterval(switchImage, 2000)
			img.addEventListener('mouseover', () => clearInterval(timerId))
			img.addEventListener('mouseout', () => { 
				timerId = setInterval(switchImage, 2000) 
			})
		</script>
	</body>
</html>