原生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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
浅谈JS的二进制家族
May 09 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 操作文件的一些FAQ总结
2009/02/12 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
thinkphp的静态缓存用法分析
2014/11/29 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
院领导写的就业推荐信
2014/03/09 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
调解协议书范本
2016/03/21 职场文书
2019大学生实习报告
2019/06/21 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js