原生js实现移动端触摸轮播的示例代码


Posted in Javascript onDecember 22, 2017

PC端上实现图片轮播效果很简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现。

下面是移动端手指滑动轮播图的完整代码。

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.lb{width:320px;height:130px;position:relative;margin:20px auto;overflow: hidden;}
.lb .lb_img{width:2240px;height:130px;position:absolute;left:-320px;}
.lb .lb_img img{width:320px;height:130px;float:left;display:block;}
.lb ul{width:35px;height:4px;position:absolute;bottom:10px;left:50%;margin-left:-15px;}
.lb ul li{width:4px;height:4px;border-radius:2px;border:0.25px solid #fff;margin-left:2.5px;background:#666;float:left;cursor:pointer;}
.lb ul .active{background:#fff;}
.lb ul li:hover{background:#fff;}
</style>
</head>
<body>
<div class="lb">
		<div class="lb_img">
			<img src="img/4.jpg">
			<img src="img/0.jpg">
			<img src="img/1.jpg">
			<img src="img/2.jpg">
			<img src="img/3.jpg">
			<img src="img/4.jpg">
			<img src="img/0.jpg">
		</div>
		<ul>
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
</div>	
<script>
var lb = document.querySelector(".lb");
var lb_img = document.querySelector(".lb .lb_img");
var img = document.querySelectorAll(".lb .lb_img img")
var lis = document.querySelectorAll(".lb ul li");
var i=2;
 // 初始化手指坐标点
 var startPoint = 0;
 var startEle = 0;
 //手指按下
 lb.addEventListener("touchstart",function(e){
 startPoint = e.changedTouches[0].pageX;
 startEle = lb_img.offsetLeft;
 clearInterval(Time)
 });
 
 //手指滑动
 lb.addEventListener("touchmove",function(e){
 var currPoint = e.changedTouches[0].pageX; 
 var disX = currPoint - startPoint;
 var left = startEle + disX;
 lb_img.style.left = left + "px"; 
 });
 //当手指抬起的时候,
 lb.addEventListener("touchend",function(e){
 	var currPoint = e.changedTouches[0].pageX;
 	var disX = - (currPoint - startPoint);
 var left = startEle + disX;
 if(disX > 150){
 		i++;
	 	for(var q=0;q<lis.length;q++){
	  lis[q].className = ''; 
	 }
	 if(i == 7){
	 	i=2;
	 }
	 lis[i-2].className= "active" ;	 	
 	lb_img.style.left = -320*(Math.round(disX/320)+i+1)+ 'px'; 		
 }else{
 	lb_img.style.left = -320*(i-1) + "px";
 }
 if(disX < -150){
 	i--;
 	for(var q=0;q<lis.length;q++){
  lis[q].className = '';
  }
  if(i == 1){
 		i=6;
 	}
 	lis[i-2].className= "active" ; 		
 	lb_img.style.left = -320*(Math.round(-disX/320)+i-2) + 'px';
	 	
 }else{
 	lb_img.style.left = -320*(i-1) + "px";
 }
 Time=setInterval(autoplay,2000);
 })
//设置定时器
Time=setInterval(autoplay,2000);
 function autoplay(){
 i++;
 for(var q=0;q<lis.length;q++){
 lis[q].className = ''; 
 }
 if(i == 7){
 i=2;
 }
 lis[i-2].className= "active" ; 
 for(var a=0; a<320;a++){
  setTimeout(function(){
   var left = lb_img.style.left ? lb_img.style.left : "-320px";
   left = parseInt(left)-1;
   if(left<-1920){
   left=-321;
   }
   lb_img.style.left = left + "px";
  },a);
 }
 }
</script>
</body>
</html>

以上这篇原生js实现移动端触摸轮播的示例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的多功能软键盘插件
Jul 25 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
JavaScript希尔排序、快速排序、归并排序算法
May 08 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
js实现网页定位导航功能
Mar 07 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 #Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 #Javascript
JavaScript实现单例模式实例分享
Dec 22 #Javascript
vue使用axios时关于this的指向问题详解
Dec 22 #Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 #Javascript
vue init失败简单解决方法(终极版)
Dec 22 #Javascript
使用axios实现上传图片进度条功能
Dec 21 #Javascript
You might like
PHP 图像尺寸调整代码
2010/05/26 PHP
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
json2.js的初步学习与了解
2011/10/06 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
2015/09/18 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
python单例模式的多种实现方法
2019/07/26 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
医药营销个人求职信范文
2014/02/07 职场文书
个人自我剖析材料
2014/02/07 职场文书
实习指导教师评语
2014/12/30 职场文书
护士2015年终工作总结
2015/04/29 职场文书
被委托人身份证明
2015/08/07 职场文书
python实现简易名片管理系统
2021/04/11 Python