<div class="parent">
    <div class="child" data-index="0" style="background-color: red;">1</div>
    <div class="child" style="background-color: rebeccapurple;">2</div>
    <div class="child" style="background-color: yellowgreen;">3</div>
</div>

js代碼如下：

(function(){
    var child_arr = document.getElementsByClassName("child");
    var len = child_arr.length;
    var parent = document.getElementsByClassName("parent")[0];
    var move_width = parent.offsetWidth;
    var index = 0; // 保存當前顯示的div索引
    function animate() {
        var childArr = [].slice.call(child_arr);
        if (index === len) {
            index = 0;
        }
        childArr.forEach(function(item, key) {
            if (index - key >= 0) {
                child_arr[key].style.marginLeft = '-' + move_width * (index - key) + 'px';
            } else {
                child_arr[key].style.marginLeft = move_width * (key - index) + 'px';
            }
        })
        index++;
    }
    clearInterval(t);
    var t = setInterval(animate, 1000);
})()

我這種寫法就不行，為什么呢？我依然是對Dom元素操作的啊，有沒有人知道原因的？求教