标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <meta name="apple-touch-fullscreen" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <script src="js/jquery-1.8.1.min.js"></script> <title>Document</title> <style> *{ margin:0px; padding:0px; } body,html{ width:100%; height:50%; } div#rect{ width:100%; height:50%;} #scrollimg{ position: relative; width: 200px; height: 110px; margin: 0 auto; overflow: hidden; } #scrollimg ul{ position: absolute; top: 0; left: 0; width: 800px; } #scrollimg ul li{ float: left; width: 200px; height: 110px; list-style: none; } #scrollimg ul li img{ display: block; width: 200px; height: 110px; } #scrollimg ul li:nth-of-type(1) img{ background: #fbb03b; } #scrollimg ul li:nth-of-type(2) img{ background: #fc5252; } #scrollimg ul li:nth-of-type(3) img{ background: #b266f2; } #scrollimg ul li:nth-of-type(4) img{ background: #d1c0a5; } #scrollimg ol{ position: absolute; bottom: 10px; right: 10px; list-style: none; } #scrollimg ol li{ float: left; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; background: rgba(255,255,255,0.5); } #scrollimg ol .active{ background: #E4393C; } </style> </head> <body> <div id="rect"> <div id="dire"></div> </div> <div id="scrollimg"> <ul> <li><a href="javascript:;"><img src="" alt=""></a></li> <li><a href="javascript:;"><img src="" alt=""></a></li> <li><a href="javascript:;"><img src="" alt=""></a></li> <li><a href="javascript:;"><img src="" alt=""></a></li> </ul> </div> <script> (function(){ var LSwiperMaker = function(o){ var that = this; this.config = o; this.control = false; this.sPos = {}; this.mPos = {}; this.dire; // this.config.bind.addEventListener(‘touchstart‘, function(){ return that.start(); } ,false); // 这样不对的，event对象只在事件发生的过程中才有效; this.config.bind.addEventListener(‘touchstart‘, function(e){ return that.start(e); } ,false); this.config.bind.addEventListener(‘touchmove‘, function(e){ return that.move(e); } ,false); this.config.bind.addEventListener(‘touchend‘, function(e){ return that.end(e); } ,false); } LSwiperMaker.prototype.start = function(e){ var point = e.touches ? e.touches[0] : e; this.sPos.x = point.screenX; this.sPos.y = point.screenY; } LSwiperMaker.prototype.move = function(e){ var point = e.touches ? e.touches[0] : e; this.control = true; this.mPos.x = point.screenX; this.mPos.y = point.screenY; } LSwiperMaker.prototype.end = function(e){ this.config.dire_h && (!this.control ? this.dire = null : this.mPos.x > this.sPos.x ? this.dire = ‘R‘ : this.dire = ‘L‘) this.config.dire_h || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = ‘D‘ : this.dire = ‘U‘) this.control = false; this.config.backfn(this); var scrollimg = this.config.bind; var width = $(scrollimg).find(‘li‘).width(); var left = $(scrollimg).find(‘ul‘).css(‘left‘); if(this.dire == ‘L‘){ left= parseInt(left)-200 +‘px‘ ; if(left == ‘-800px‘) left=0; $(scrollimg).find(‘ul‘).css(‘left‘,left) }else{ left= parseInt(left) + 200 +‘px‘ ; if(left == ‘200px‘) left=-600; $(scrollimg).find(‘ul‘).css(‘left‘,left) } } window.LSwiperMaker = LSwiperMaker; document.addEventListener(‘touchmove‘, function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突 }()) var a = new LSwiperMaker({ bind:document.getElementById("scrollimg"), // 绑定的DOM对象 dire_h:true, //true 判断左右， false 判断上下 backfn:function(o){ //回调事件 document.getElementById("dire").innerHTML = "向"+ o.dire + "滑"; } }) </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/wenrain/p/5369612.html
