                        課程
                    
                        /前端開發(fā)
                        
                            /WebApp
                        
                        /Web App下圖片滑動組件的開發(fā)

請大神幫忙指點(diǎn)下這個哪里錯了，我搞了一下午了

<!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">
?? ?//初始化根節(jié)點(diǎn)的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>