鼠标悬停在PictureRotation时停止轮播离开时有启动

<div id="RotationChartModule">
                        <div class="PictureRotation">
                            <div id="tation_imgBox" style="width: 2840px;transform: translateX(0px);overflow:hidden;position: absolute;backface-visibility:hidden;">
                                <div class="tation_img" style="float:left;width:564px;" data-rotaion="0"><a href=""><img src="../html/imge/O1CN011yBJBI1FtCEaHaebh_!!6000000000544-2-octopus.png" alt="">a>div>
                                <div class="tation_img" style="float:left;width:564px;" data-rotaion="1"><a href=""><img src="../html/imge/O1CN013jhNY51VGkqFZezAz_!!6000000002626-0-octopus.jpg" alt="">a>div>
                                <div class="tation_img" style="float:left;width:564px;" data-rotaion="2"><a href=""><img src="../html/imge/O1CN01uFc5A720osRJbUXo9_!!6000000006897-2-octopus.png" alt="">a>div>
                                <div class="tation_img" style="float:left;width:564px;" data-rotaion="3"><a href=""><img src="../html/imge/O1CN01q68omo1PFU3CIDAub_!!6000000001811-2-octopus.png" alt="">a>div>
                                <div class="tation_img" style="float:left;width:564px;" data-rotaion="4"><a href=""><img src="../html/imge/O1CN01VCxO9H1ujwTZEUBOU_!!6000000006074-0-octopus.jpg" alt="">a>div>
                            div>
                            <ul class="RotationDot_Dot">
                                <li class="rotation_Dot active"  data-tation="0">li>
                                <li class="rotation_Dot"  data-tation="1">li>
                                <li class="rotation_Dot"  data-tation="2">li>
                                <li class="rotation_Dot"  data-tation="3">li>
                                <li class="rotation_Dot"  data-tation="4">li>
                            ul>
                            <div class="btn" style="visibility:hidden;">
                                <button class="leftButton"><i class="leftIcon">◄i>button>
                                <button class="rightButton"><i class="rightIcon">►i>button>
                            div>
                        div>
                    div>

window.onload = function(){
    var PictureRotation = document.querySelector('.PictureRotation');
    var tation_imgBox = PictureRotation.children[0];
    var width = PictureRotation.offsetWidth;
    var RotationDot_Dot = PictureRotation.children[1];
    var btn = document.getElementsByClassName('btn')[0];
    var index = 0;
    var timer = setInterval(function(){
     index++;
     var translatex = -index * width;
     tation_imgBox.style.transition = 'all 0.3s';
     tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
    },3000);
    tation_imgBox.addEventListener('transitionend',function(){
        if(index >= 5){
            index = 0;
            tation_imgBox.style.transition = 'none';
            var translatex = -index * width;
            tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
        }else if(index < 0){
            index = 2;
            tation_imgBox.style.transition = 'none';
            var translatex = -index *width;
            tation_imgBox.style.transform = 'translateX(' + translatex + 'px)';
        }
        RotationDot_Dot.querySelector('.active').classList.remove('active');
        RotationDot_Dot.children[index].classList.add('active');
    });
    PictureRotation.onmouseover = function(){
            btn.style.visibility = 'visible';
    }
    PictureRotation.onmouseout = function(){
        btn.style.visibility = 'hidden';
    }
};

主要是从2840px转回0的时候会出现短暂空白过渡想解决

是不是有部分css代码没放上来