<!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>
1 回答
李晓健
TA贡献1036条经验 获得超461个赞
<div class="slidebox"> <ul class="slideContent"> <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>
div和ul忘加 class了
点击展开后面1条
添加回答
举报
0/150
提交
取消