刚入手js的小白白们，如何用js实现一个简单的轮播图呢
首先我的排版是这个样的

<div class="wrap">
        <div class="images">
            <li class="get"><img src='../images/banner1.jpg' alt=""></li>
            <li><img src="../images/banner2.jpg" alt=""></li>
            <li><img src="../images/banner3.jpg" alt=""></li>
        </div>
        <div class="buttom">
            <p class=" left-btn icon iconfont icon-angle-left"> </p>
            <p class=" right-btn icon iconfont icon-angle-right"></p>
        </div>
        <div class="radius">
            <li class="get"></li>
            <li></li>
            <li></li>
        </div>
    </div>

接下来是less样式

.wrap {
    position: relative;
    width   : 940px;
    height  : 320px;

    .images {
        width : 840px;
        height: 320px;
        .get {
            display: block;
        }
        li {
            display: none;
            img {
                width : 840px;
                height: 320px;
            }
        }
    }

    .buttom {
        p {
            position : absolute;
            top      : 45%;
            font-size: 40px;
&:nth-of-type(2) {
                position: absolute;
                right   : 10%;
            }
        }
    }
.radius {
        position: absolute;
        right   : 50%;
        top     : 90%;
.get {
        background: pink;
        }
li {
        float           : left;
        margin-right    : 10px;
        width           : 20px;
        height          : 20px;
        background-color: #ccc;
        border-radius   : 50%;
        }
    }
}

接下来就是最重要的js部分啦

//获取图片的元素
var imgs = document.querySelectorAll('.imgs>li');
//获取页码的元素
var pages = document.querySelectorAll('.pages>li');
//获取按钮的元素
var leftBtn = document.querySelector('.left-btn');
var rightBtn = document.querySelector('.right-btn');
//获取大盒子的元素
var wrapper = document.querySelector('.big');

console.log(imgs);
console.log(pages);
console.log(leftBtn);
console.log(rightBtn);
console.log(wrapper);

//设置下标为0
var index = 0;

//定时器
var timer = null;

//左边按钮
leftBtn.onclick = function () {
    //每点击一次使下标-1
    index--;
    //如果下标<0，则将下标变为图片的数量
    if (index < 0) {
        index = imgs.length - 1;
    }
    move();
}

//右边按钮
rightBtn.onclick = function () {
    //每点击一次使下标+1
    index++;
    //如果下标>图片数量，则将下标重置为0
    if (index >= imgs.length) {
        index = 0;
    }
    move();
}

//图片和页码滚动
function move() {
    //先清除所有的类名
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].className = '';
        pages[i].className = '';
    }
    //图片指定的滚动
    imgs[index].className = 'active';
    //页码指定的滚动
    pages[index].className = 'active';
}

//划入清除定时器
wrapper.onmouseenter = function () {
    clearInterval(timer);
    timer = null;
}
//划出继续执行定时器
wrapper.onmouseleave = function () {
    time();
}

//定时器
function time() {
    timer = setInterval(function () {
        rightBtn.onclick();
    }, 2000)
}
time();

//滑过页码切换图片
for (var i = 0; i < pages.length; i++) {
    pages[i].index = i;
    pages[i].onmouseenter = function () {
        index = this.index;
        move();
    }
}

给大家作为一个参考嘻嘻