<!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>
請大神指點一下我這個代碼錯在哪里？
大熊_
2016-10-30 17:24:09
