今天分享下移动端原生js的无缝轮播图;

移动端尽量减少使用DOM操作来频繁的浪费移动端设备的性能,所以这个无缝轮播图更多的使用了transition和transform,无缝的思想和昨天分享的PC端的无缝轮播的思想是一样的,分别在正常的图片的前面插入了最后一张图片和在正常图片的最后插入了第一张图片,在运动到这两张图片时候瞬间清除transition并把整个图片链拉回到正常图片流的位置,从而从产生了无缝

这个移动端轮播图中还阐述了一个思路:为了更好的考虑用户的体验,当用户滑动屏幕的距离小于一定的值得时候我们图片并不会更换到下一张,这个效果的产生得益于流程控制if判断用户按下手指和抬起手指的坐标差的值

相同的今天的例子中也使用了开关的概念,具体思路昨天的文章中已经阐述

今天的例子以640的分辨率为基准,并在js动态的改变onresize时候值,使我们的代码满足不同手机的尺寸

The best preparation for tomorrow is doing your best today.
过好今天,是对明天最好的准备

html代码:

    <div id="tabs">
<ul>
<li style="background:pink;">3</li>
<li style="background:red;">0</li>
<li style="background:green;">1</li>
<li style="background:yellow;">2</li>
<li style="background:pink;">3</li>
<li style="background:red;">0</li>
</ul>
</div>

css代码:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no,email=no">
<style>
*{
padding: 0;
margin: 0;
list-style:none;
}
html{
font-size:20px;
}
#tabs ul{
width: 96rem;
height: 100%;
overflow:hidden;
transform:translateX(-16rem);
}
#tabs ul li{
width: 16rem;
height: 7.5rem;
float:left;
font-size:3rem;
color:#fff;
text-align:center;
line-height:7.5rem;
}

js代码:

        //以640的分辨率为基准分辨率设置的css模型尺寸,闭包中的代码为实时改变单位尺寸
(function(window,document){
function change(){
var oHTML=document.getElementsByTagName('html')[0];
oHTML.style.fontSize=20*document.documentElement.clientWidth/320+'px';
}
change();
window.addEventListener('resize',change,false);
})(window,document); document.addEventListener('DOMContentLoaded',function(){
var oTab=document.getElementById('tabs');
var oUl=oTab.getElementsByTagName('ul')[0];
var aLi=oUl.children;
var iNow=1;
var x=-aLi[0].offsetWidth*iNow;
//设置开关
var bReady=false; oUl.addEventListener('touchstart',function(ev){
if(bReady){return;}
bReady=true;
oUl.style.transition='none';
//当开始触摸的时候记录按下的坐标
var downX=ev.targetTouches[0].pageX;
var disX=downX-x; function fnMove(ev){
//在move的时候重新计算位移,并给ul赋值
x=ev.targetTouches[0].pageX-disX;
oUl.style.transform='translateX('+x+'px)';
} function fnEnd(ev){
document.removeEventListener('touchmove',fnMove,false);
document.removeEventListener('touchend',fnEnd,false);
//在抬起的时候记录抬起的位置,注意抬起的位置是changedTouches[0]
var upX=ev.changedTouches[0].pageX;
//开启transition
oUl.style.transition='0.4s all ease';
//这里为了用户体验,判断了一个最小移动距离,当移动距离小于这个值得时候并不发生运动
if((Math.abs(upX-downX))>50){
//判断移动方向,是向右还是向左
if(downX>upX){
iNow++;
//设置移动范围
if(iNow==aLi.length) iNow=aLi.length-1;
}else{
//和右面是相反的
iNow--;
if(iNow==-1) iNow=0;
}
}
//进行赋值
x=-aLi[0].offsetWidth*iNow;
oUl.style.transform='translateX('+x+'px)'; //设置ul的变化
function tEnd(){
//为了不让瞬间拉回被发现,首先要清除transition
oUl.style.transition='none';
//进行无缝判断,当图片到右面倒数第二张的时候拉回到第二张
if(iNow==aLi.length-1){
iNow=1;
}else if(iNow==0){
//当图片运动到第一张的时候瞬间拉回到倒数第三张
iNow=aLi.length-2;
}
x=-aLi[0].offsetWidth*iNow;
oUl.style.transform='translateX('+x+'px)';
bReady=false;
}
oUl.addEventListener('transitionend',tEnd,false);
}
document.addEventListener('touchmove',fnMove,false);
document.addEventListener('touchend',fnEnd,false);
ev.preventDefault();
},false);
},false);
</script>

  

js原生选项卡(包含移动端无缝选项卡)三的更多相关文章

  1. js原生选项卡(包含无缝滚动轮播图)一

    原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...

  2. tab选项卡切换(js原生、jQuery )

    思路: ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 <!DO ...

  3. JS原生ajax

    原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...

  4. js原生高逼格插件

    如何定义一个高逼格的原生JS插件 作为一个前端er,如果不会写一个小插件,都不好意思说自己是混前端界的.写还不能依赖jquery之类的工具库,否则装得不够高端.那么,如何才能装起来让自己看起来逼格更高 ...

  5. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  6. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  7. js原生事件系统与坐标系统

    今天来实现一个可兼容的js原生拖拽,在这里面我将会讲到: 1.封装兼容性的事件系统. 2.封装得到鼠标当前位置的系统. 3.完成拖拽的实现. 首先,我们要讲到鼠标位置的获取,讲到这个,就离不开js的w ...

  8. 15、js 原生基础总结

    Day1 一.什么是JS?   ==基于对象==和==事件驱动==的客户端脚本语言 二.哪一年?哪个公司?谁?第一个名字是什么? 1995,NetScape(网景公司),布兰登(Brendan Eic ...

  9. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

随机推荐

  1. 关于使用ResultSet ---结果集没有当前行

    Resultset返回的结果集是从结果的前一句开始的,也就是说一开始的resultset是没有的,所以,一般使用的时候,需要这样子写:      while( resultSet.next() ){ ...

  2. C++模板元编程

    ABC

  3. JQuery插件validate的Remote使用

    JQuery.validate.js 在表单验证中经常使用,初学,对于其中Remote的使用说明一下. 1. 基本解释 JQuery主要用于DOM树和CSS树的检索和后面的操作的一套方法,JQuery ...

  4. 一台电脑存放多个git账户的多个rsa秘钥

    未命名.html div.oembedall-githubrepos{border:1px solid #DDD;border-radius:4px;list-style-type:none;marg ...

  5. Android Http请求框架一:Get 和 Post 请求

    1.HttpUtil package com.app.android01; import java.io.BufferedReader; import java.io.IOException; imp ...

  6. iOS仿京东分类菜单实例实现

    在APP开发过程中此功能还是比较常见的模块,左边为菜单展示,右边为菜单下数据的展示,选择不同的菜单右边的数据源进行更新,此实例主要运用到UITableView,UICollectionView,OC谓 ...

  7. NSInvocation

    NSInvocation 基本简介 NSInvocation是一个静态描绘的OC消息,也就是说,它是一个动作,这个动作可以变成一个对象.NSInvocation对象在对象和对象之间和应用程序和应用程序 ...

  8. UITableView删除添加和移动

    #import "RootTableViewController.h" @interface RootTableViewController () @property (nonat ...

  9. 斯坦福iOS7公开课10笔记及演示Demo

    这一节主要介绍了多线程中的串行队列以及滚动视图UIScrollView. 1 .多线程 这一节只是简单介绍了多线程的串行队列,即把任务加入线程队列后按顺序逐步执行. (1)目前iOS多线程提供的方法主 ...

  10. 【转】初识CGI

    一.基本原理 CGI:通用网关接口(Common Gateway Interface)是一个Web服务器主机提供信息服务的标准接口.通过CGI接口,Web服务器就能够获取客户端提交的信息,转交给服务器 ...