2 ljfljfljfabc123 ljfljfljfabc123 于 2016.04.07 15:39 提问

原生js手机切换 如何往一个方向切换的时候可以循环切换

<!DOCTYPE html>



移动端触摸滑动



*{margin:0;padding:0;} li{list-style:none;} .m-slider{width:600px;margin:50px 20px;overflow:hidden;} .m-slider .cnt{position:relative;left:0;width:3000px;} .m-slider .cnt li{float:left;width:600px;} .m-slider .cnt img{display:block;width:100%;height:450px;} .m-slider .cnt p{margin:20px 0;} .m-slider .icons{text-align:center;color:#000;} .m-slider .icons span{margin:0 5px;} .m-slider .icons .curr{color:red;} .f-anim{-webkit-transition:left .2s linear;}

1 2 3 4 5
var slider = { //判断设备是否支持touch事件 touch:('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch, slider:document.getElementById('slider'), //事件 events:{ index:0, //显示元素的索引 slider:this.slider, //this为slider对象 icons:document.getElementById('icons'), icon:this.icons.getElementsByTagName('span'), handleEvent:function(event){ var self = this; //this指events对象 if(event.type == 'touchstart'){ self.start(event); }else if(event.type == 'touchmove'){ self.move(event); }else if(event.type == 'touchend'){ self.end(event); } }, //滑动开始 start:function(event){ var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值 isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动 this.slider.addEventListener('touchmove',this,false); this.slider.addEventListener('touchend',this,false); }, //移动 move:function(event){ //当屏幕有多个touch或者页面被缩放过,就不执行move操作 if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return; var touch = event.targetTouches[0]; endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y}; isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时,表示纵向滑动,0为横向滑动 if(isScrolling === 0){ event.preventDefault(); //阻止触摸事件的默认行为,即阻止滚屏 this.slider.className = 'cnt'; this.slider.style.left = -this.index*600 + endPos.x + 'px'; } }, //滑动释放 end:function(event){ var duration = +new Date - startPos.time; //滑动的持续时间 if(isScrolling === 0){ //当为水平滚动时 this.icon[this.index].className = ''; if(Number(duration) > 10){ //判断是左移还是右移,当偏移量大于10时执行 if(endPos.x > 10){ if(this.index !== 0) this.index -= 1; }else if(endPos.x < -10){ if(this.index !== this.icon.length-1) this.index += 1; } } this.icon[this.index].className = 'curr'; this.slider.className = 'cnt f-anim'; this.slider.style.left = -this.index*600 + 'px'; } //解绑事件 this.slider.removeEventListener('touchmove',this,false); this.slider.removeEventListener('touchend',this,false); } }, //初始化 init:function(){ var self = this; //this指slider对象 if(!!self.touch) self.slider.addEventListener('touchstart',self.events,false); //addEventListener第二个参数可以传一个对象,会调用该对象的handleEvent属性 } }; slider.init();


1个回答

ljfljfljfabc123
ljfljfljfabc123   2016.04.07 15:40
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
改变屏幕显示方向(同时切换横竖屏的图片)
在学习改变横竖屏显示方向的例子的时候,我把例子程序敲进去之后
Android手机切换横竖屏时Activity的生命周期
今天看到一个关于Android手机切换横竖屏时Activity的生命周期的问题,在论坛先查阅了相关的文章,然后自己也测试了一下,发现结果有些不同。我测试的模拟器是Android4.0,自己的手机是Android4.4.4的,如果结果有什么差错,希望多多指教。好了,现在开始进入正文。 第一部分:测试代码 package com.njit.activity_screenorention_life
原生JS实现TAB栏切换
之前上传了一个jquery实现tab栏切换的博客,这个是原生js实现tab栏切换的案例,不多说直接上代码!同样复制粘贴就能看到效果哦! <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .Box{ width: 2
用原生js写个class切换
*{margin:0;padding:0;} #toggle{ width:100%; height:100px; display:flex; display:-webkit-flex; box-sizing: border-box; } #toggle div{ width:33.333%; height:100%; flex:1; border:1px solid #e
多张图片的左右切换特效,实现循环切换
一个页面同时要显示多个图片,并且需要实现这多个图片的循环切换。 贴代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
android横竖屏切换,activity生命周期方法是否会回调
关于android横竖屏切换时候发生了什么。
原生js网页繁简切换功能
原生js控制网页繁简切换
原生JS实现table切换
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&amp;gt; &amp;
JS原生实现图片轮播切换效果
首先来分析一下轮播图效果的实现原理: 1、父元素作为显示窗口,大小固定超出部分隐藏,即设置overflow:hidden; 2、子元素存放图片列表用ul,ul固定定位,参照为父元素,即父元素position:relative;ul元素position:absolute; 3、一个li即一张图片的宽度为父元素的显示宽度 4、初始时,ul的left为0,这时第一张图片即第一个li显示 5、点
关于用原生js实现tab栏的切换:
今天并不是很忙 ,然后就复习了原生的js。如何用原生js实现tab栏的切换呢?请看下图:当鼠标在女装男装时,显示女装男装。 当鼠标点击鞋子时,出现鞋靴的盒子。 准备一个测试的demo: 举个栗子 如下图 当鼠标点击第一个按钮时,显示第一个盒子。 当点击第二个按钮时,显示第二个盒子。献上 HTML 。。 最后加上js: markdown写代码还不如贴照片的感觉好,说实在话。但是照片上传却