原生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 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
vue中使用腾讯云Im的示例
Oct 23 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
农民C键的运用技巧
2020/03/04 星际争霸
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
javascript中length属性的探索
2011/07/31 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
JS实现的简单tab切换功能完整示例
2019/06/20 Javascript
Python Requests 基础入门
2016/04/07 Python
python安装与使用redis的方法
2016/04/19 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python实现的计数排序算法示例
2017/11/29 Python
用matplotlib画等高线图详解
2017/12/14 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python基于ID3思想的决策树
2018/01/03 Python
python定向爬取淘宝商品价格
2018/02/27 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Python绘制热力图示例
2019/09/27 Python
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
致跳高运动员广播稿
2014/01/13 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
外国人聘用意向书
2014/04/01 职场文书
学校社会实践活动总结
2014/07/03 职场文书
2015年采购部工作总结
2015/04/23 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
python实现学生信息管理系统(面向对象)
2022/06/05 Python