JavaScript 轮播图代码优化：实现流畅滑动与点击控制

window.addEventListener('load', function() { var ss = document.querySelector('.ss'); var zl = document.querySelector('.zl'); var xx = document.querySelector('.xx');

var ul = zl.querySelector('ul');
var ol = zl.querySelector('.zx');

console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
    var li = document.createElement('li');
    li.setAttribute('index', i);
    ol.appendChild(li);
    li.addEventListener('click', function() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        this.className = 'on';
        var index = this.getAttribute('index');
        num = index;
        i = num;
        var dd = 350;
        ul.style.left = -index * dd + 'px';
    })
}
console.log(i);
ol.children[0].className = 'on';
var num = 0;
var oo = 0;
var dd = 350;

xx.addEventListener('click', function() {
    if (num == 9) {
        ul.style.left = 0;
        num = -1;
    };
    num++;
    ul.style.left = -num * dd + 'px';
    oo++;
    if (oo == ol.children.length) {
        oo = 0;
    }
    for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
    }
    ol.children[oo].className = 'on';
});

    ss.addEventListener('click', function() {
        if (num < 1) {
            ul.style.left = -3150;
            num = 10;
        };
        num--;
        ul.style.left = -num * dd + 'px';
        oo--;
        if (oo < 0) {
            oo = ol.children.length - 1;
        }
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[oo].className = 'on';
    });

});