42 lines
1.3 KiB
HTML
42 lines
1.3 KiB
HTML
|
<!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>
|