原生JS实现图片轮播--淡入淡出

本篇博客所实现的图片轮播是较为简单的一种轮播，轮播效果为固定的位置不同图片的切换，所以首先需要对页面进行简单的布置
HTML部分

<div class="b">
    <div class="btn">
        <span class="btn_left"><</span>
        <span class="btn_right">></span>
    </div>
    <div class="imggo">
        <img class="imgshow" src="./0118练习/img/111.jpg" alt=""/>
        <img class="imgs" src="./0118练习/img/222.jpg" alt=""/>
        <img class="imgs" src="./0118练习/img/333.jpg" alt=""/>
        <img class="imgs" src="./0118练习/img/444.jpg" alt=""/>
        <img class="imgs" src="./0118练习/img/555.jpg" alt=""/>
        <img class="imgs" src="./0118练习/img/666.jpg" alt=""/>
        <img class="imgs" src="./0118练习/img/777.jpg" alt=""/>
        <img class="imgs" src="./0118练习/img/888.jpg" alt=""/>
    </div>
    <div class="dian">
        <div class="dianone"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS部分

   <style>
        .b{
            position: relative;
            margin: 100px auto;
            width: 600px;
            height: 400px;
            border: 1px solid silver;
            box-sizing:border-box;
        }
        .imggo{
            position: relative;
            width: 600px;
            height: 400px;
        }
        .imggo img{
            position: absolute;
            width: 100%;
            height: 100%;
            transition: opacity 1s linear;
        }
        .imgshow{
            opacity: 1;
        }
        .imgs{
            opacity: 0;
        }
        .btn{
            position: absolute;
            z-index: 10;
            top: 175px;
            width: 600px;
            height: 50px;
            line-height: 50px;
        }
        .btn_left{
            cursor: pointer;
            float: left;
            width: 40px;
            height: 50px;
            text-align: center;
            background-color: #a3a3a3;
            color: white;
        }
        .btn_right{
            cursor: pointer;
            top: 175px;
            float: right;
            width: 40px;
            height: 50px;
            text-align: center;
            background-color: #a3a3a3;
            color: white;
        }
        .dian{
            position: absolute;
            z-index: 999;
            bottom: 10px;
            left: 10px;
        }
        .dian>div{
            width: 13px;
            height: 13px;
            margin-right: 5px;
            border: 1px solid silver;
            box-sizing: border-box;
            border-radius: 50%;
            background-color: transparent;
            float: left;
        }
        .dianone{
            background-color: red!important;
        }

    </style>

下面是实现的静态页面图

下来是本轮播的关键部分实现，本轮播要实现的是在上图那个固定区域实现图片淡入淡出播放，而且当鼠标进入轮播轮播暂停自动播放，鼠标出来轮播接着自动播放，点击左右两端的按钮轮播进行相应的切换，鼠标进入底部的小点轮播也进行相应的切换，下面是JS部分代码的实现

var time;//接受计时器
    var aPar = document.getElementsByClassName("a")[0];
    var block = document.getElementsByClassName("b")[0];
    var dianpar = document.getElementsByClassName("dian")[0];
    //获取左右按钮
    var btnleft = document.getElementsByClassName("btnleft")[0];
    var btnright = document.getElementsByClassName("btnright")[0];
    var nowbg = dianpar.children[0];//当前变色的点元素
    //调整层
    for (var i = 0; i < aPar.children.length; i++) {
        aPar.children[i].style.zIndex = aPar.children.length - i - 1;
    }
    showAnimate();
    function showAnimate() {
        time = setInterval(function () {
            countAnimate(1);
        }, 2000);
    }
    function countAnimate(num) {
        for (var k = 0; k < num; k++) {
            for (var i = 0; i < aPar.children.length; i++) {
                var index = aPar.children[i].style.zIndex;
                index++;
                if (index == aPar.children.length) {
                    index = 0;
                    aPar.children[i].className = "imgop";
                    dianpar.children[i].className = "";
                }
                if (index == aPar.children.length - 1) {
                    dianpar.children[i].className = "dbg";
                    nowbg = dianpar.children[i];
                    aPar.children[i].className = "imgopshow";
                }
                aPar.children[i].style.zIndex = index;
            }
        }
    }
    block.onmouseenter = function () {
        clearInterval(time);
    }
    block.onmouseleave = function () {
        showAnimate();
    };
    for (var i = 0; i < dianpar.children.length; i++) {
        dianpar.children[i].index = i;
        dianpar.children[i].onmouseenter = function () {
            nowbg.className = "";
            this.className = "dbg";
            var num = 0;
            if (this.index - nowbg.index > 0) {
                num = this.index - nowbg.index;
            }
            else {
                num = dianpar.children.length - Math.abs(this.index - nowbg.index);
            }
            countAnimate(num);
            nowbg = this;
        }
    }
    //处理掉浏览器的默认选择
    document.onselectstart = function () {
        return false;
    }
    btnleft.onclick = function () {
        countAnimate(7);
    }
    btnright.onclick = function () {
        countAnimate(1);
    }

以上就是本轮播所有代码的实现