原生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根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
JS实现无限轮播无倒退效果
Sep 21 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设计模式 Command(命令模式)
2011/06/26 PHP
php长字符串定义方法
2012/07/12 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
php单例模式实现方法分析
2015/03/14 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python实现在sqlite动态创建表的方法
2015/05/08 Python
详解Python中的日志模块logging
2015/06/19 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
python3实现表白神器
2019/04/09 Python
python中安装django模块的方法
2020/03/12 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
python IDLE添加行号显示教程
2020/04/25 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
竟聘演讲稿范文
2013/12/31 职场文书
自我评价的写作规则
2014/01/06 职场文书
供应链金融服务方案
2014/05/25 职场文书
代收款委托书范本
2014/10/01 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
总结python多进程multiprocessing的相关知识
2021/06/29 Python