<!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>
报什么错