【初识轮播图】

 <!-- 
   主题思路：
      1.通过改变图片的路径实现
      2.搭建html框架
      3.获取js需要用到的标签
      4.制作图片路径数组
      5.自动跳转函数
      6.设置左翻和右翻
      7.设置图片悬停
      8.设置圆点点击实现跳转
 -->
    <div class="fa">
        <img src="……" alt="">
        <div class="left"></div>
        <div class="right"></div>
        <ol class="lis">
            <li></li>
            <li></li>
            <li></li>
            <li></li>

        </ol>
    </div>

    <script>
        const left = document.querySelector('.left'); //左翻按钮
        const right = document.querySelector('.right'); //右fan按钮
        let fa = document.querySelector('.fa'); //
        let ol = document.querySelector('.lis');
        let lis = ol.children; //所有小圆点

        const arr = ['IMG_0711.jpeg', 'IMG_0839.jpeg', 'IMG_0840.jpeg', 'IMG_0841.jpeg'];//制作图片的路径数组
        let img = document.querySelector('img');

             //封自动跳转函数
             function foo() {
            i++;
            if (i > arr.length - 1) {  //如果图片到最后一张，将重新从第一张开始播放
                i = 0;
            }
            img.src = `./imgs/${arr[i]}`; 
            for (let item of lis) {
                item.style.backgroundColor = '#fff';
            }
            lis[i].style.backgroundColor = 'red'; //绑定图片跟圆点的动作一致

        }

        let i = 0, timer = null; //设置初始下标为0 
        timer = setInterval(foo, 1000); //调函数

        //右翻
        right.onclick = function () {
            foo();
        }
        //左翻
        left.onclick = function () {
            reverse();
        }
        function reverse() {
            i--;
            if (i < 0) {
                i = arr.length - 1
            }
            img.src = `./imgs/${arr[i]}`;
        }

        //设置放置图片上图片悬停
        fa.onmouseenter = function () {
            clearInterval(timer);
        }
        fa.onmouseleave = function () {
            timer = setInterval(foo, 1000);
        }
        //圆点点击
        for (let index in lis) {
            lis[index].onclick = function () {
                i = index - 1;
                foo();
            }
        }


   


        
    </script>
</body>