轮播图html - 技术栈

题十二：轮播图

要求：

1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；

2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；

3.点击左右箭头可以进行左右图片的切换；

4.图片上需有介绍的文字，会随图片切换一起进行切换。

原理：

当鼠标进入时，左走箭头出现，定时器关闭，离开时，箭头消失，定时器开启。
写DOM对应的小圆点，找让图片文字小圆点的高亮移除，再当索引值到了之后，添加高亮事件.

当点击左图右图是分别修改其对应的索引号.

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF - 8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义轮播图</title> <style> #container { margin: 0 auto; position: relative; width: 600px; height: 600px; overflow: hidden; } #container img { width: 100%; height: 100%; background-size: cover; display: none; } #container img.active { display: block; } .arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; color: white; background: rgba(0, 0, 0, 0.3); padding: 10px 15px; cursor: pointer; display: none; } #left { left: 10px; } #right { right: 10px; } #dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; } #dots span { width: 10px; height: 10px; border-radius: 50%; background: gray; margin: 0 5px; cursor: pointer; } #dots span.active { background: white; } .name { position: absolute; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.5); color: white; padding: 10px; text-align: center; font-size: 30px; } </style> </head> <body>

fall'in out

找自己

单车恋人

< >

复制代码

 <script>
     const Container = document.querySelector('#container')
     const images = document.querySelectorAll('#container img')
     const names = document.querySelectorAll('.name')
     const dotsContainer = document.getElementById('dots')
     const Left = document.querySelector('#left')
     const Right = document.querySelector('#right')
     //当前显示图片的索引
     let currentIndex = 0
     //命名自动播放定时器
     let autoplayInterval

      function onMouseEnter() {
         //鼠标一进入就关闭定时器
         clearInterval(autoplayInterval)
         Left.style.display = 'block'
         Right.style.display = 'block'
     }
     function onMouseLeave() {
         //开启
         startAutoplay()
         Left.style.display = 'none'
         Right.style.display = 'none'
     }
     Left.addEventListener('click', () => {
         clearInterval(autoplayInterval)
         //一定要调用
         leftImage()
     });
     Right.addEventListener('click', () => {
         clearInterval(autoplayInterval)
         rightImage()
     })

     Container.addEventListener('mouseenter', function() {
         onMouseEnter()
     })
     Container.addEventListener('mouseleave', function() {
         onMouseLeave()
     })
     
     // 显示指定索引的图片
     function showImage(index) {
         images.forEach((img, i) => {
             //先全部移除高亮
             img.classList.remove('active')
             //文字也先不显示
             names[i].style.display = 'none'
         })
         dotsContainer.querySelectorAll('span').forEach((dot, i) => {
             //小圆点高亮移除
             dot.classList.remove('active')
         })
         //到相应的索引号，高亮和文字显示
         images[index].classList.add('active')
         names[index].style.display = 'block'
         //小圆点高亮添加
         dotsContainer.querySelectorAll('span')[index].classList.add('active')
         //修改索引号
         currentIndex = index
     }

     function createDots() {
         //回调函数，函数对应的DOM元素及索引号
         images.forEach((_, index) => {
             //新建小圆点，有几个DOM建几个
             const dot = document.createElement('span')
             if (index === 0) {
                 //默认高亮类名
                 dot.classList.add('active')
             }
             dot.addEventListener('click', function() {
                 //一旦点击，关闭定时器
                 clearInterval(autoplayInterval)
                 showImage(index)
             })
             //根据DOM数量，添加小圆点
             dotsContainer.appendChild(dot)
         });
     }
     // 右图
     function rightImage() {
         //index+1
         currentIndex = (currentIndex + 1) % images.length
         showImage(currentIndex)
     }

     // 左图
     function leftImage() {
         //同理
         currentIndex = (currentIndex - 1 + images.length) % images.length
         showImage(currentIndex);
     }

     function startAutoplay() {
         autoplayInterval = setInterval(rightImage, 1500)
     }

     // 调用小圆点和自动播放，使页面一开始就有效果
     createDots()
     startAutoplay()
   
 </script>

</body> </html>