轮播图实现

不点击会自动播放，点左按钮向左轮播，点右按钮向右轮播，点击小圆点轮播到指定图片。 

 html中：

一个图片列表用来存放要轮播的图片，再一个圆点列表存放和图片数量一样的小圆点

两个按钮控制左右轮播

   <div class="banner">
        <ul class="banner-ul">
            <li>
                <a href="#">
                    <img src="./banner/a1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./banner/a2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./banner/a3.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./banner/a4.jpg" alt="">
                </a>
            </li>
        </ul>
        <div class="banner-btn banner-btn--l">&lt;</div>
        <div class="banner-btn">&gt;</div>
        <ul class="banner-circle">
            <li data-index="0" class="active"></li>
            <li data-index="1"></li>
            <li data-index="2"></li>
            <li data-index="3"></li>
        </ul>
    </div>

css中：

用透明度的形式来显示图片

*{
    box-sizing: border-box;
}
body,ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.banner{
    position: relative;
    width: 1200px;
    height: 343px;
    margin: 0 auto;
}
.banner-ul{
    width: 100%;
    height: 100%;
}
.banner-ul>li{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}
.banner-ul>li a{
    height: 100%;
    display: block;
}
.banner-ul>li img{
    width: 100%;
}
.banner-ul li:first-child{
    z-index: 6;
    /* 重叠元素显示优先级 */
}
.banner-btn{
    position: absolute;
    top: 50%;
    margin-top: -35px;
    right: 0;
    width: 41px;
    height: 70px;
    font-size: 40px;
    text-align: center;
    line-height: 69px;
    color: #fff;
    cursor: pointer;
    z-index: 10;
}
.banner-btn--l{
    left: 0;
}
.banner-btn:hover{
    background-color: rgba(0,0,0,0.5);
}
.banner-circle{
    display: flex;
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 10;
}
.banner-circle>li{
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255,255,255,0.8);
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.banner-circle>li.active,.banner-circle>li:hover{
    background-color: rgba(255,255,255,0.6);
}

js中：

var btns = document.querySelectorAll(".banner-btn");
var imgs = document.querySelectorAll(".banner-ul>li");
var circle = document.querySelectorAll(".banner-circle>li");
var bannerCircle = document.querySelector(".banner-circle");

var imgIndex = 0;//当前图片索引

var lastIndex = 0;//下一张图片索引
//透明度渐变
function hide(element){
    var opacity = 1;
    var index = setInterval(()=>{
        opacity -= 0.03;
        if(opacity <= 0){
            opacity = 0;
            clearInterval(index);
        }
        element.style.opacity =opacity;
    },10);
}
// 改变图片修改透明度，修改circle的active
function imgOpacity(){
    hide(imgs[imgIndex]);
    imgs[imgIndex].style.zIndex = 6;
    circle[imgIndex].classList.remove("active");
    imgs[lastIndex].style.opacity = 1;
    imgs[lastIndex].style.zIndex = 5;
    circle[lastIndex].classList.add("active");
}
// 自动播放
var timer;
function autoOpacity(){
    if(timer){
        clearInterval(timer);
    }
    timer = setInterval(opacityRight,3000)
}
function opacityRight(){
    if(imgIndex === 3){
        lastIndex = 0;
    }
    else {
        lastIndex = imgIndex + 1;
    }
    imgOpacity();
    imgIndex = lastIndex;//指针后移
}
// 点击左侧按钮
btns[0].onclick = function(){
    autoOpacity();//节流
    if(imgIndex === 0){
        lastIndex = 3;
    }
    else {
        lastIndex = imgIndex - 1;
    }
    imgOpacity();
    imgIndex = lastIndex;//指针后移
}
// 点击右侧按钮
btns[1].onclick = function(){
    autoOpacity();//节流
    opacityRight();
}

// 点击circle
bannerCircle.onclick = function (e){
    if(e.target.tagName === "LI"){
        autoOpacity();//节流
        lastIndex = Number(e.target.dataset.index);
        imgOpacity();
        imgIndex = lastIndex;//指针后移
    }
}
autoOpacity();