Js原生实现轮播图

<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif;
    }
    
    body {
        background: #eee;
    }
    
    #Bigbox {
        width: 720px;
        height: 420px;
        border: 1px solid #333;
        margin: 60px auto;
    }
    
    #Box {
        width: 700px;
        height: 400px;
        position: relative;
        overflow: hidden;
        top: 10px;
        left: 10px;
    }
    
    #Ul {
        height: 400px;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    #Ul li {
        width: 700px;
        height: 400px;
        float: left;
    }
    
    #Left {
        width: 60px;
        height: 50px;
        border-radius: 30%;
        background: rgba(96, 96, 96, .5);
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -25px;
        color: #fff;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
        font-size: 20px;
        display: none;
    }
    
    #Right {
        width: 60px;
        height: 50px;
        border-radius: 30%;
        background: rgba(96, 96, 96, .5);
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -25px;
        color: #fff;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
        font-size: 20px;
        display: none;
    }
</style>

<div id="Bigbox">
        <div id="Box">
            <ul id="Ul">
                <li>
                    1<img src="img/1.jpg" width="100%" height="100%">
                </li>
                <li>
                    2<img src="img/2.jpg" width="100%" height="100%">
                </li>
                <li>
                    3<img src="img/3.jpg" width="100%" height="100%">
                </li>
                <li>
                    4<img src="img/4.jpg" width="100%" height="100%">
                </li>
                <li>
                    5<img src="img/5.jpg" width="100%" height="100%">
                </li>
                <li>
                    6<img src="img/6.jpg" width="100%" height="100%">
                </li>
                <li>
                    7<img src="img/7.jpg" width="100%" height="100%">
                </li>
                <li>
                    8<img src="img/8.jpg" width="100%" height="100%">
                </li>
                <li>
                    9<img src="img/9.jpg" width="100%" height="100%">
                </li>
                <li>
                    10<img src="img/10.jpg" width="100%" height="100%">
                </li>
            </ul>
            <div id="Left" onselectstart="return false">左</div>
            <div id="Right" onselectstart="return false">右</div>
        </div>
 </div>

<script>
    window.onload = function() {
            var n = 0;
            var timer = null;
            var timer1 = null;
            var timer2 = null;
            var timer3 = null;
            var oDiv = document.getElementById('Box')
            var oUl = document.getElementById('Ul')
            var oLi = oUl.getElementsByTagName('li')
                //获取div宽度
            var oDivWidth = getStyle(oDiv, 'width').split('px')[0] //复制oUl的innerHTML
            oUl.innerHTML += oUl.innerHTML
                //设置ul宽度
            oUl.style.width = oLi.length * oDivWidth + 'px'
                //获取ul宽度
            var oUlWidth = getStyle(oUl, 'width').split('px')[0] //封装获取非行间样式函数
            function getStyle(obj, sName) {
                if (obj.currentStyle) {
                    return obj.currentStyle[sName];
                } else {
                    return getComputedStyle(obj, false)[sName];
                }
            }
            //执行函数
            clearInterval(timer3)
            timer3 = setInterval(function() {
                    Run()
                }, 2000)
                //封装运动函数
            function Run() {
                clearInterval(timer)
                timer = setInterval(function() {
                    n -= 20;
                    oUl.style.left = n + 'px'
                    if (n % oDivWidth == 0) {
                        clearInterval(timer3)
                        clearInterval(timer)
                        clearInterval(timer1)
                        timer1 = setTimeout(function() {
                            Run()
                        }, 2000)
                    }
                    if (n <= -oUlWidth / 2) {
                        oUl.style.left = 0;
                        n = 0;
                        clearInterval(timer3)
                        clearInterval(timer)
                        clearInterval(timer1)
                        timer1 = setTimeout(function() {
                            Run()
                        }, 2000)
                    }
                }, 30)
            }

            //鼠标移入停止滚动
            oDiv.onmouseover = function() {
                Left.style.display = 'block'
                Right.style.display = 'block'
                clearInterval(timer3)
                clearInterval(timer2)
                timer2 = setInterval(function() {
                    if (n % oDivWidth == 0) {
                        clearInterval(timer)
                        clearInterval(timer1)
                    }
                }, 30)

            }

            //鼠标移出继续执行
            oDiv.onmouseout = function() {
                Left.style.display = 'none'
                Right.style.display = 'none'
                clearInterval(timer3)
                clearInterval(timer2)
                clearInterval(timer1)
                timer1 = setTimeout(function() {
                    Run()
                }, 2000)
            }

            //向左
            Left.onclick = function() {
                //清除所有定时器
                clearInterval(timer)
                clearInterval(timer1)
                clearInterval(timer2)
                clearInterval(timer3)
                timer = setInterval(function() {
                    n -= 50;
                    oUl.style.left = n + 'px'
                    if (n % oDivWidth == 0) {
                        clearInterval(timer)
                    }
                    if (n <= -oUlWidth / 2) {
                        oUl.style.left = 0;
                        n = 0;
                    }
                }, 30)
            }

            //向右
            Right.onclick = function() {
                clearInterval(timer)
                clearInterval(timer1)
                clearInterval(timer2)
                clearInterval(timer3)
                if (n == 0) {
                    n = -oUlWidth / 2
                }
                clearInterval(timer)
                timer = setInterval(function() {
                    n += 50;
                    oUl.style.left = n + 'px'
                    if (n % oDivWidth == 0) {
                        clearInterval(timer)
                    }

                }, 30)
            }
        }
</script>

如有错误 欢迎评论纠正 谢谢！