怎么用js的原生写法写出来一个轮播图呢？

首先我们来总结一下原理：

1：排出一个版，包含上下切换的标识和图片导航，所有图片隐藏，给图片第一张加一个class名，样式设为显示，图片导航的第一个加一个class名，加上背景色；
2：获取节点；
3：给向下切换写一个点击事件，点击图片切换到下一张，注意当图片切换到最后一张的时候会报错，所以必须要判断一下，当图片切换到最后一张的时候在，再次击会切换到第一张；
4：给向上切换写一个点击事件，注意当图片切换到第一张之后会报错，所以必须要判断一下，当图片切换到第一的时候，再次点击会切换到最后张，循环起来；
5：写一个定时器，定时器的播放顺序和向下切换一致，可以封装一个函数方便调用；
6：写鼠标划入事件，清除定时器；
7：写鼠标移出事件，定时器继续运行；
8：图片导航的点击事件

需要用到的知识点

点击事件click
定时器setlnterval（）
if判断
for（）循环

第二步

var box = document.querySelector('.box');//获取box
var last = document.querySelector('.last');//获取 
var next = document.querySelector('.next');
var imgs = document.querySelectorAll('ul li');
var ol_li = document.querySelectorAll('ol li');

var time = null, index = 0;

第三步

next.onclick = function () {//向下切换的点击事件
    auto();
}
function auto() {//封装一个向下切换的函数
    index++;//图片向后走
    console.log(imgs.length)
    if (index > imgs.length - 1) {//判断
        index = 0;
    }
    getOther(index)
}

封装一个排他的函数

function getOther(ind) {//封装一个排他的函数
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].className = '';
        ol_li[i].className = '';
    }
    imgs[index].className = 'active';
    ol_li[index].className = 'active1';
}

第五步

time = setInterval(function () {//定时器
    auto()
}, 1000);

第四步

last.onclick = function () {//向上切换的点击事件
    index--;
    if (index < 0) {
        index = imgs.length - 1;
    }
    getOther(index);
}

第六步

box.onmouseover = function () {//鼠标移入事件
    clearInterval(time);
    time = null;
}

第七步

box.onmouseout = function () {//鼠标移出事件
    time = setInterval(function () {
        auto();
    }, 1000);
}
for (var i = 0; i < ol_li.length; i++) {
    ol_li[i].ind = i;//标记当前下标

    ol_li[i].onclick = function () {
        index = this.ind;绑定当前下标
        getOther(this.ind);
    }
}