| 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>
|
