原生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 相关文章推荐
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
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正则中的捕获组与非捕获组
2016/07/18 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
可输入的下拉框
2006/06/19 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[01:08]DOTA2“血战之命”预告片
2017/08/12 DOTA
Python模拟登录验证码(代码简单)
2016/02/06 Python
python3中int(整型)的使用教程
2017/03/23 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
python中的常量和变量代码详解
2018/07/25 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
pandas 数据类型转换的实现
2020/12/29 Python
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
销售总监工作职责
2013/11/21 职场文书
思想品德课教学反思
2014/02/10 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2014年个人年终总结
2015/03/09 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
初一军训感言
2015/08/01 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
Pytest中conftest.py的用法
2021/06/27 Python