无缝轮播

function $(names) {
    return document.getElementById(names);
}
var left = $('left');
var right = $('right');
var box = document.getElementsByClassName('box')[0];
var li_list = document.querySelectorAll('#imgul li');
var ol_list = document.querySelectorAll('ol li');
var timer = null;
var count = 0;

function auto() {
    count++;
    if (count > li_list.length - 1) {
         count = 0;
    }
    for (var i = 0; i < li_list.length; i++) {
       li_list[i].style = 'display:none;';
       ol_list[i].className = '';
     }
     li_list[count].style = 'display:block;'
     ol_list[count].className = 'active';

}
timer = setInterval(auto, 500);
right.onclick = function () {
    auto();
}
left.onclick = function () {
    count--;
    if (count < 0) {
        count = li_list.length - 1;
    }
    console.log(count);
    for (var i = 0; i < li_list.length; i++) {
        li_list[i].style = 'display:none;';
        ol_list[count].className = '';
    }
    li_list[count].style = 'display:block;';
    ol_list[count].className = 'active';
}

box.onmouseover = function () {
    clearInterval(timer);
}
box.onmouseout = function () {
    timer = setInterval(auto, 500);
}
for (var j = 0; j < ol_list.length; j++) {
    ol_list[j].ind = j;
    ol_list[j].onclick = function () {
        for (var i = 0; i < li_list.length; i++) {
            li_list[i].style = 'display:none;';
            ol_list[i].className = '';
        }
        li_list[this.ind].style = 'display:block;';
        ol_list[this.ind].className = 'active';
         count = this.ind;
    }
}