共有6张图片， 鼠标停在按钮上，图片播放。鼠标离开按钮，图片停止播放。可是显示半张图片。怎么解决？

* { margin: 0; padding: 0; } .warp { width: 1032px; height: 250px; overflow: hidden; float: left; margin: auto; } .banner { height: 250px; width: 2752px; position: relative; margin: auto; float: left; left: 0; } .banner-one { height: 250px; width: 330px; float: left; margin-left: 7px; margin-right: 7px; } .prev { width: 83px; height: 270px; background: url(img/last.png); float: left; } .next { width: 83px; height: 270px; background: url(img/next.png); float: left; } .continear { width: 1200px; height: 100%; margin: auto; }
</head>
<body>
    <div class="continear">
        <div class="prev" id="prev"></div>
        <div class="warp">
            <div class="banner" id="banner">
                <!--<div class="banner-one" style="background: url(img/programming1.png);"></div>
                <div class="banner-one" style="background: url(img/programming2.png);"></div>-->
                <div class="banner-one" style="background: url(img/programming3.png);"></div>
                <div class="banner-one" style="background: url(img/programming4.png);"></div>
                <div class="banner-one" style="background: url(img/programming5.png);"></div>
                <div class="banner-one" style="background: url(img/programming6.png);"></div>
                <div class="banner-one" style="background: url(img/programming7.png);"></div>
                <div class="banner-one" style="background: url(img/programming8.png);"></div>
            </div>
        </div>
        <div class="next" id="next"></div>
    </div>
    <script>
        window.onload = function() {
            //通过选择器查询元素
            var obanner = document.querySelector("#banner");
            var oPrev = document.querySelector("#prev");
            var oNext = document.querySelector("#next");
            var speed;
            //给元素设置事件
            //右边按钮事件
            oNext.onmouseover = function() {
                animate(obanner, "left", 3 * 344);
            };
            function animate(ele, attr, value) {
                clearInterval(ele.timer);
                //添加定时器
                //setInterval() 方法每 5毫秒执行function() 函数 ，该函数可以实现图片滑动效果
                ele.timer = setInterval(function() {
                    //获取当前属性值
                    //获取对象ele的属性值attr
                    var now = getComputedStyle(ele)[attr];
                    //转换数据类型
                    now = parseInt(now);
                    speed = value/43;
                    if (now == -value) {
                        //清理定时器
                        clearInterval(ele.timer);                           
                    }
                    else{
                        ele.style[attr] = (now - speed) + "px";
                    }
                }, 50);
            };
            oNext.onmouseout=function(){  
            clearInterval(obanner.timer);  
            }  
            //左边按钮事件
            oPrev.onmouseover = function() {
                animate1(obanner, "left", 3 * 344);
            };
            function animate1(ele, attr, value) {
                clearInterval(ele.timer);
                ele.timer = setInterval(function() {
                    //获取当前属性值
                    var now = getComputedStyle(ele)[attr];
                    now = parseInt(now);
                    speed = value/43;
                    if (now == 0) {
                        //清理定时器
                        clearInterval(ele.timer);
                    }
                    else{
                        ele.style[attr] = (now + speed) + "px";
                    }
                }, 50);
            };
            oPrev.onmouseout=function(){  
            clearInterval(obanner.timer);  
            } 
        }
    </script>![图片说明](https://img-ask.csdn.net/upload/201711/08/1510126157_862072.png)

你的图片大小的问题吧，我的不会，不过后面有空白，没有接着前面。