原生javascript移动端滑动banner效果


Posted in Javascript onMarch 10, 2017

本文实例为大家分享了移动端滑动banner效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta content="telephone=yes" name="format-detection" />
 <meta name="apple-mobile-web-app-status-bar-style" content="white">
 <meta name="x5-fullscreen" content="true">
 <meta name="apple-touch-fullscreen" content="yes">
 <title>Document</title>
 <style>
  *{margin:0;padding:0;}
  .box{
   height:200px;
   width:100%;
   overflow: hidden;
  }
  .movebox{
   height:200px;
   width:9000px;
   padding:0;
   position:relative;
   left:0;
  }
  .movebox li{
   height:200px;
   float:left;
   list-style:none;
   font-size:30px;
   color:#fff;
  }

 </style>
 <script>
  window.onload = function(){

   var moveX,  //手指滑动距离
    endX,  //手指停止滑动时X轴坐标
    cout = 0, //滑动计数器
    moveDir; //滑动方向
   var movebox = document.querySelector(".movebox"); //滑动对象
   var Li = movebox.querySelectorAll("li"); //滑动对象item
   var width = parseInt(window.getComputedStyle(movebox.parentNode).width); //滑动对象item的宽度

   movebox.style.width = (width*4) + "px"; //设置滑动盒子width
   for(var i = 0; i < Li.length; i++){
    Li[i].style.width = width + "px"; //设置滑动item的width,适应屏幕宽度
   }

   //触摸开始
   function boxTouchStart(e){
    var touch = e.touches[0]; //获取触摸对象
    startX = touch.pageX; //获取触摸坐标
    endX = parseInt(movebox.style.webkitTransform.replace("translateX(", "")); //获取每次触摸时滑动对象X轴的偏移值
   }

   function boxTouchMove(e){
    var touch = e.touches[0];
    moveX = touch.pageX - startX; //手指水平方向移动的距离

    if(cout == 0 && moveX > 0){  //刚开始第一次向左滑动时
     return false;
    }

    if(cout == 3 && moveX < 0){  //滑动到最后继续向右滑动时
     return false;
    }

    movebox.style.webkitTransform = "translateX(" + (endX + moveX) + "px)"; //手指滑动时滑动对象随之滑动
   }

   function boxTouchEnd(e){
    moveDir = moveX < 0 ? true : false;  //滑动方向大于0表示向左滑动,小于0表示向右滑动
    //手指向左滑动
    if(moveDir){

     if(cout<3){
      movebox.style.webkitTransform = "translateX(" + (endX-width) + "px)";
      cout++;
     }
    //手指向右滑动
    }else{
     //滑动到初始状态时返回false
     if(cout == 0){
      return false;
     }else{
      movebox.style.webkitTransform = "translateX(" + (endX+width) + "px)";
      cout--;
     }
    }
   }

   //滑动对象事件绑定
   movebox.addEventListener("touchstart", boxTouchStart, false);
   movebox.addEventListener("touchmove", boxTouchMove, false);
   movebox.addEventListener("touchend", boxTouchEnd, false);
  }
 </script>
</head>

<body style="position:absolute;width:100%;overflow:hidden;">
 <div class="box">
  <ul class="movebox" style="transition-duration:0.2s;transform: translateX(-0px);">
   <li style="background:red;">1</li>
   <li style="background:yellow">2</li>
   <li style="background:blue">3</li>
   <li style="background:green">4</li>
  </ul>
 </div>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的类型简单说明
Sep 03 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
jQuery弹出窗口简单实现代码
Mar 09 #Javascript
JavaScript实现弹窗效果代码分析
Mar 09 #Javascript
详解Vue方法与事件
Mar 09 #Javascript
Vue实现自带的过滤器实例
Mar 09 #Javascript
Vue中fragment.js使用方法详解
Mar 09 #Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 #Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 #Javascript
You might like
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
新闻学专业应届生求职信
2013/11/08 职场文书
幼儿园教师培训制度
2014/01/16 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
工作检讨书大全
2015/01/26 职场文书
工商局个人工作总结
2015/03/03 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技