使用原生js（javascript）开撸淡入淡出轮播图

首先先上css样式

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        .carousel {
            width: 590px;
            height: 469px;
            overflow: hidden;
            position: relative;
        }

        .carousel .image-box {}

        .carousel .image-box li {
            /* float: left; */
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: all 2s;
        }

        .carousel .image-box li.show {
            opacity: 1;
            z-index: 66;
        }
        .hide {
            /* transition: all 2s; */
            opacity: 0;
        }

        .carousel .image-box li a {
            display: block;
        }

        .carousel .image-box li a img {
            display: block;
        }

        /* 左右滑动 */
        .carousel span {
            text-align: center;
            cursor: pointer;
            display: none;
            line-height: 50px;
            text-align: center;
            font-size: 32px;
            font-weight: bold;
            width: 40px;
            height: 50px;
            position: absolute;
            top: 50%;
            margin-top: -25px;
            z-index: 66666;
            background-color: RGBA(0, 0, 0, .3);
            color: #fff;
            -webkit-tap-highlight-color: transparent;
            -ms-user-select: none;
            /*IE10*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            user-select: none;
        }

        .carousel:hover span {
            display: block;
        }

        .carousel span:hover {
            background-color: RGBA(0, 0, 0, .7);
        }

        .carousel span:first-of-type {
            left: 0px;
        }

        .carousel span:last-of-type {
            right: 0px;
        }

        /* 点盒子 */
        .carousel .point-box {
            width: 120px;
            height: 30px;
            position: absolute;
            bottom: 50px;
            left: 50%;
            margin-left: -60px;
            z-index: 666666;
        }

        .carousel .point-box li {
            float: left;
            width: 20px;
            height: 30px;
            padding: 5px 0 0 5px;
            display: inline-block;
        }

        .carousel .point-box li a {
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 7px;
            border: 2px solid #F0F8FF;
        }

        .carousel .point-box li a.now {
            background: #e92322;
        }
    </style>

然后就是html样式

 <div class="main">
        <div class="carousel">
            <ul class="image-box">
                <li class="show"><a href=""><img src="./images/slider1.jpg" alt=""></a>1111</li>
                <li class=""><a href=""><img src="./images/slider2.jpg" alt=""></a>2222</li>
                <li class=""><a href=""><img src="./images/slider3.jpg" alt=""></a>3333</li>
                <li class=""><a href=""><img src="./images/slider4.jpg" alt=""></a>44444</li>
            </ul>
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
            <ul class="point-box">
                <li><a href="javascript: void(0)" class="abc now"></a></li>
                <li><a href="javascript: void(0)" class="abc"></a></li>
                <li><a href="javascript: void(0)" class="abc"></a></li>
                <li><a href="javascript: void(0)" class="abc"></a></li>
            </ul>
        </div>
    </div>

css有几点要注意的；
1：图片li元素要设置position： absolute;
2 : 要添加给当前图片的class要设置z-index覆盖其他图片

下面是js代码了，先做些初始化工作

        var carousel = document.querySelector('.carousel')

        var [imageBox,prev,next] = [...carousel.children]

        var oli = imageBox.children
        var pli = document.querySelectorAll('.point-box li a')
        var timer;
        var index = 0

        for (let i = 0; i < oli.length; i++) {                      // 防止有时点击到图片，而让左右按钮不显示的体验
            const element = oli[i];
            element.onclick = function(){
                return false
            }
        }

下面是自动播放函数和设置点移动函数

        // 自动播放
        function auto() {
            clearInterval(timer)
            timer = setInterval(() => {
              
                index++
                setPoint()

                oli[oli.length-1].classList.remove('show')
               
                // 当前加上class
                oli[index].classList.add('show')

                //  如果存在上一张图片删除class
               if(oli[index-1]){
                   oli[index-1].classList.remove('show')
               }

                if (index >= 3) {
                    index = -1
                }
            }, 2000)
        }
        auto()
        
       //点移动
         function setPoint() {
                for (let i = 0; i < pli.length; i++) {
                    pli[i].classList.remove('now')
                    if (index >= 0) {
                        pli[index].classList.add('now')
                    }
                }
            };

离开or进入执行自动播放or暂停

    // 进入上一张或者下一张按钮清除自动播放
        prev.onmousemove = next.onmousemove = function () {
              clearInterval(timer)
         }
     // 进入清除自动播放    
         carousel.addEventListener('mousemove', () => {
                clearInterval(timer)
            }, false)
       // 离开自动播放
            carousel.addEventListener('mouseout', function () {
                auto()
            })

点击左边按钮和右边按钮执行图片切换事件

    //点击右边按钮触发事件
       next.addEventListener('click', function () {
            
            clearTimeout(time)
            var time = setTimeout(() => {
                index++
                setPoint()

                //  删除最后一张class 
                oli[oli.length - 1].classList.remove('show')

                // 当前加上
                oli[index].classList.add('show')

                //  如果存在上一张图片删除class
                if (oli[index - 1]) {
                    oli[index - 1].classList.remove('show')
                }

                if (index >= 3) {
                    index = -1
                }

            }, 1000);

        }, false)
        
      //点击左边按钮触发事件
        prev.addEventListener('click', function () {

                 clearTimeout(timer)
              var timer = setTimeout(() => {
                index--
               
               if (index<=-1) {
                   index = 3
               }
                setPoint()

                //  删除第一张class 
                oli[0].classList.remove('show')

                   // 当前加上class
                oli[index].classList.add('show')

                // 如果存在上一张图片删除class
                if (oli[index + 1]) {
                    oli[index + 1].classList.remove('show')
                }

            }, 1000);

                
        }, false)

点击圆点执行图片切换事件

 for (let i = 0; i < pli.length; i++) {
        pli[i].inde = i
        pli[i].onclick = function () {
            for (let i = 0; i < pli.length; i++) {
                pli[i].classList.remove('now')
                pli[this.inde].classList.add('now')
                // 清除所有   
                 oli[i].classList.remove('show')
            }
            // 当前加上   
            oli[this.inde].classList.add('show')

            index = [this.inde];
        }
    }

想要源代码懒得赋值粘贴的，就来我的github地址：https://github.com/xlyh250