原生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实现更改默认alert框体
Apr 13 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
JavaScript数组的5种迭代方法
Sep 29 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 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
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
PHP IE中下载附件问题解决方法
2014/01/07 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
php中this关键字用法分析
2016/12/07 PHP
javascript 简练的几个函数
2009/08/29 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
Node.js事件驱动
2015/06/18 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
Vue中v-for的数据分组实例
2018/03/07 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
详解python读取image
2019/04/03 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
python中判断文件结束符的具体方法
2020/08/04 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
2015年科室工作总结
2015/04/10 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
《我是什么》教学反思
2016/02/16 职场文书