轮播图html

题十二：轮播图

要求：

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

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

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

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

原理：

1. 当鼠标进入时，左走箭头出现，定时器关闭，离开时，箭头消失，定时器开启。

2. 写DOM对应的小圆点，找让图片文字小圆点的高亮移除，再当索引值到了之后，添加高亮事件.

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

   

   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>