请大神帮忙指点下这个哪里错了，我搞了一下午了-慕课网

请大神帮忙指点下这个哪里错了，我搞了一下午了

来源：4-4 优化处理

大熊_

2016-10-30 17:38

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
   <title>demo2</title>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }

       .slidebox{
           width: 100%;
           height: 300px;
           overflow:hidden;

       }

       img{
           width: 100%;
           height: 100%;
       }

       ul{
           display: -webkit-box;
           display:box;
           position: absolute;
           transition: all 1s ease;
       }

       .slidebox ul li{
           width: 10rem;
           list-style: none;
       }
   </style>
</head>
<body>
   <div>
       <ul>
           <li>1<img src="1.jpg"></li>
           <li>2<img src="1.jpg"></li>
           <li>3<img src="1.jpg"></li>
           <li>4<img src="1.jpg"></li>
       </ul>

   </div>
</body>
<script type="text/javascript">
   //初始化根节点的fontsize，便于使用rem
   function initSize(){
           var html = document.querySelector("html");
           var clientWidth = document.documentElement.clientWidth
           html.style.fontSize = (clientWidth/10)+"px";
       }

   window.addEventListener("DOMContentLoaded",initSize);
   window.addEventListener("resize",initSize);

   //滚动组件
   function Slider(opts){
       this.slide(opts);
   }

   //滚动
   Slider.prototype.slide = function(opts){
       var slideContent = document.querySelector("."+opts.slideContent),
           liLen = slideContent.querySelectorAll("li").length,
           point = {},
           index = 0,
           getPos =function(e){
               var touches = e.touches;
                if(touches && touches[0]) {
                    return { x : touches[0].clientX ,
                           y : touches[0].clientY };
                }
           },

           getChange = function(p1,p2){
               if(p1 && p2){
                   return {
                       cx:p2.x-p1.x,
                       cy:p2.y-p1.y
                   }
               }
           },

           goToIndex = function(index){
               var clientWidth = document.documentElement.clientWidth;
               slideContent.style.transform =
               "translate("+(-index*clientWidth-point.change.cx)+"px,0)";
           },

           startHandler = function(e){
               point.startTime = new Date().getTime();
               point.startPoint = getPos(e);
               point.length = 0;
           },

           moveHandler = function(e){
               point.endPoint = getPos(e);
               point.change = getChange(point.startPoint,point.endPoint);
               point.length = point.change.cx;
           },

           endHandler = function(e){
               point.endTime = new Date().getTime();
               if(point.endTime-point.startTime<200){
                   if(point.change.cx<0){
                       index++;
                   }
                   if(point.change.cx>0){
                       index--;
                   }
               }else{
                   if(point.change.cx<-50){
                       index++;
                   }else if(point.change.cx>100){
                       index--;
                   }
               }
               if(index<0){
                   index = 0;
               }
               if(index>liLen-1){
                   index =liLen-1;
               }

               goToIndex(index);
           }

           slideContent.addEventListener('touchstart',startHandler);
           slideContent.addEventListener('touchmove',moveHandler);
           slideContent.addEventListener('touchend',endHandler);
   }

   new Slider({'slideContent':'slideContent'});
</script>
</html>