渐隐轮播图的实现

html

 <div id="focus">
        <ul class="pic">
            <li style="background-color:red;" class="on">0</li>
            <li style="background-color:green;">1</li>
            <li style="background-color:blue;">2</li>
            <li style="background-color:yellow;">3</li>
        </ul>
        <ol class="circle">
            <!-- <li class="active">0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li> -->
        </ol>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>

css

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        #focus {
            width: 600px;
            height: 400px;
            /* border: 5px solid orange; */
            background-color: orange;
            margin: 10px auto;
            position: relative;
            /* 溢出隐藏 */
            /* overflow: hidden; */
        }

        #focus .pic {
           width: 100%;
            height: 100%;
        
        }

        #focus .pic li {
            width: 600px;
            height: 100%;
            text-align: center;
            font-size: 50px;
            line-height: 400px;
            /* ---- */
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: all 1s ease;
            /* ---- */
        }

        #focus .pic li.on {
            opacity: 1;
        }

        /* ---- */
        .circle {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);

        }

        .circle li {
            width: 16px;
            height: 16px;
            background-color: #fff;
            margin: 0 4px;
            border-radius: 50%;
            box-shadow: 0 0 6px rgba(0, 0, 0, 1);
            float: left;
            font-size: 12px;
        }

        .circle li.active {
            background-color: orange;
        }

        .prev,
        .next {
            width: 40px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.6);
            display: block;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.6);
            font-size: 30px;
            padding-left: 5px;
            line-height: 60px;
            border-radius: 0 30px 30px 0;
            display: none;

        }

        .next {
            left: auto;
            right: 0;
            border-radius: 30px 0 0 30px;
            padding-left: 15px;
        }
    </style>

js

<script>
        //1.查
        var focus = document.querySelector('#focus');
        var pic = document.querySelector('.pic');
        var lis = document.querySelectorAll('.pic li');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var circle = document.querySelector('.circle')

        //拿到一个li的宽度
        var liW = lis[0].offsetWidth;
        var time = null;//timer;

        //2.功能一：经过轮播区，左右箭头显示与隐藏
        focus.onmouseenter = function () {
            prev.style.display = "block";
            next.style.display = "block";
            clearInterval(time)

        }
        focus.onmouseleave = function () {
            prev.style.display = "none";
            next.style.display = "none";

            time = setInterval(function () {
                //定时器，自动触发向右单击事件
                next.onclick()

            }, 2500)

        }
        // ------------------------------------小圆点
        // var arr=['<img src="">',]
        //6.功能六： 动态生成小圆点
        for (var i = 0; i < lis.length; i++) {
            var li = document.createElement('li');
            //   li.innerHTML=arrr[i];
            li.setAttribute('idx', i);//自定义属性  存在索引号
            circle.appendChild(li);

            //排它思想 选项卡
            li.onclick = function () {
                //找到带active的li
                var activeLi = document.querySelector('.circle li.active');
                activeLi.classList.remove('active');
                this.classList.add('active');

                var idx = this.getAttribute('idx');// 获取索引号
                //解决bug
                index = idx;
                cir = idx;
                document.querySelector('.pic li.on').classList.remove('on');
                lis[idx].classList.add('on')

            }


        }
        circle.children[0].classList.add('active');



        //---------------------------------------     

        //3.功能二：单击向右的箭头，pic（ul）整体向左移动
      
        var index = 0;// 图片的索引号
        var cir = 0;// 小圆点的索引号
        next.onclick = function () {
            if (index == lis.length-1) {
                index = -1;  
            }
            index++;
            document.querySelector('.pic li.on').classList.remove('on');
            lis[index].classList.add('on')

            // -----小圆点
            cir++;
            if (cir == circle.children.length) {
                cir = 0;
            }
            run(cir);
        }





        prev.onclick = function () {

            if (index == 0) {
                index = lis.length;  
            }
            index--;
            document.querySelector('.pic li.on').classList.remove('on');
            lis[index].classList.add('on');

            // -----小圆点
            cir--;
            if (cir == -1) {
                cir = circle.children.length - 1;
            }
            run(cir);
        }

        //4.功能四：实现自动轮播
        time = setInterval(function () {
            //定时器，自动触发向右单击事件
            next.onclick()

        }, 2500)


        //5.功能五 鼠标经过轮播区，让动画停下来，离后，再继续动画
        // 转到前面 操作


        //-------------------------
        //7.功能   左右箭头 控制小圆点   ，都要控制，排它思想封装一下
        //cir 当前不圆点的索引号
        function run(cir) {
            //找到带active的li
            var activeLi = document.querySelector('.circle li.active');
            activeLi.classList.remove('active');
            //对应索引号的孩子增加active
            circle.children[cir].classList.add('active');
        }


        //-------------------


        //8.解决两个bug
        /*
        8.1 按钮单击快 图与很快
        8.2  index cir   idx没有关系  呼应不好 
        
        */
    </script>