js小滑块

<div class="bigbox">
		<div class="smallbox">
			<ul>
				<li>
					<div class="inner_content"><img src="http://via.placeholder.com/600x300" alt=""></div>
					<div class="inner_message">
						<h2>this is a title</h2>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</li>
				<li>
					<div class="inner_content"><img src="http://via.placeholder.com/600x300" alt=""></div>
					<div class="inner_message">
						<h2>this is a title</h2>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</li>
				<li>
					<div class="inner_content"><img src="http://via.placeholder.com/600x300" alt=""></div>
					<div class="inner_message">
						<h2>this is a title</h2>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</li>
				<li>
					<div class="inner_content"><img src="http://via.placeholder.com/600x300" alt=""></div>
					<div class="inner_message">
						<h2>this is a title</h2>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</li>
				<li>
					<div class="inner_content"><img src="http://via.placeholder.com/600x300" alt=""></div>
					<div class="inner_message">
						<h2>this is a title</h2>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</li>
				<li>
					<div class="inner_content"><img src="http://via.placeholder.com/600x300" alt=""></div>
					<div class="inner_message">
						<h2>this is a title</h2>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</li>
				<li>
					<div class="inner_content"><img src="http://via.placeholder.com/600x300" alt=""></div>
					<div class="inner_message">
						<h2>this is a title</h2>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
						<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="arrow_left"><</div>
		<div class="arrow_right">></div>
	</div>

　　

*{
        margin: 0;
        padding: 0;
    }
    img{
        width: 100%;
        height: auto;
    }
        .bigbox{
            position: relative;
        }
        .smallbox{
            width: 100%;
            overflow: hidden;
        }
        .smallbox ul{
            width: 400%;
            /*取决你放几屏幕的宽度*/
        }
        .smallbox ul li{
            width: 12.5%;
            /*取决你的一屏幕下的需要展示的数目*/
            /*因为demo是四屏幕，100/4/2*/
            float: left;
            overflow: hidden;
        }
        .inner_content,.inner_message{
            float: left;
            width: 50%;
        }
        .arrow_left{
            position: absolute;
            top:50%;
            left: 0;
            font-size:2em;
            transform: translateY(-50%); 
        }
        .arrow_right{
            position: absolute;
            top: 50%;
            right: 0;
            font-size: 2em;
            transform: translateY(-50%);
        }
        @media screen and (max- 900px){
            /*写媒体查询的时候记得要先在head标签声明好视口*/
            .smallbox ul li{
                width: 14.285714%;
            }
            .smallbox ul{
            width: 700%;
            }
            .arrow_left,.arrow_right{
                display: none;
            }
        }

var smallbox_width = document.querySelector(".smallbox").offsetWidth;
        var smallbox_ul = document.querySelector(".smallbox ul");
        var arrow_right = document.querySelector(".arrow_right");
        var arrow_left = document.querySelector(".arrow_left");
        smallbox_ul.style.position="relative";
        smallbox_ul_width = smallbox_ul.offsetWidth;
        // ul滑块的总的宽度
        screenWidth = window.screen.width;
        // 屏幕的宽度，原本想利用滑块的宽度除以屏幕的宽度得到需要的屏幕数，用来给index定值，可是好像获取的屏幕像素和实际预期的居然不一样！！！
        var index =0;

        arrow_right.onclick=towardRight;
        arrow_left.onclick=towardLeft;
        tapEvents(smallbox_ul);
        console.log(screenWidth)
        console.log(smallbox_ul_width)
        function tapEvents(obj){
            var startX = null;
            var endX = null;
            obj.addEventListener("touchstart",function(e){
                startX = e.touches[0].clientX;
            });
            obj.addEventListener("touchmove",function(e){
                endX = e.touches[0].clientX - startX-30;
            });
            obj.addEventListener("touchend",function(){
                if(endX>0){
                    towardLeft();
                }else{
                    towardRight();
                }
            })
        }
        function towardLeft(){
            index--;
            if(index<0){
                index = Math.ceil(smallbox_ul_width/smallbox_width)-1;
            }
                move_box(smallbox_ul,-index*smallbox_width);
        }
        function towardRight(){
            index++;
            if(index>(Math.ceil(smallbox_ul_width/smallbox_width)-1)){
                index=0;
            }
            move_box(smallbox_ul,-index*smallbox_width);
        }


        function move_box(ele,target){
            var timer = null;
            clearInterval(timer);
            timer = setInterval(fn1,20);
            function fn1(){
                var step = ele.offsetLeft - target>0?-10:10;
                var val = ele.offsetLeft - target;
                ele.style.left = ele.offsetLeft +step+"px";
                if(Math.abs(val)<=step){
                    ele.style.left = target+"px";
                    clearInterval(timer);
                }
            }
        }