轮播图_transform 版本

  • 关键点:
  • 2D 变换 transform 不会改变 元素 在 文档流 中的位置
  • 定位 position 会改变 元素 在 文档流 中的位置
  • 语句解析太快,使用 setTimeoout(); 等待渲染       不能超过 20ms
  • touchstart 实现 无缝滑屏:

创建两组图片,ulList.innerHTML = ulList.innerHTML;

1. 触屏时,如果是第一组的第一张图片,则瞬间切换到第二组的第一张图片;

2. 触屏时,如果是第二组的最后一张图片,则瞬间切换到第一组的最后一张。

  • transform 读写二合一

关键点:

arguments 参数列表,类数组对象,调用函数时系统隐式传递的一个实参

  • function transformEle(ele, attr, val){
    if(!ele.transform){
    ele.transform = {};
    }; var result = "";
    if(arguments.length > 2){
    // 写入操作
    ele.transform[attr] = val; for( var attrStr in ele.transform){
    switch(attrStr){
    case "translate":
    case "translateX":
    case "translateY":
    case "translateZ":{
    result += attrStr+"("+ele.transform[attrStr]+"px) ";
    break;
    }; case "rotate":
    case "rotateX":
    case "rotateY":
    case "rotateZ":
    case "skew":
    case "skewX":
    case "skewY":{
    result += attrStr+"("+ele.transform[attrStr]+"deg) ";
    break;
    }; case "scale":
    case "scaleX":
    case "scaleY":{
    result += attrStr+"("+ele.transform[attrStr]+") ";
    break;
    };
    };
    }; ele.style.transform = result;
    }else{
    // 读取操作
    if(ele.transform[attr]){
    result = ele.transform[attr];
    }else{
    if(attr == 'scale' || attr == 'scaleX' || attr == 'scaleY'){
    result = 1;
    }else{
    result = 0;
    };
    }
    }; return result;
    };
  • 移动端 无缝滑屏
  • 自动轮播 与 无缝滑屏的冲突

  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <title>无缝轮播</title> <style type="text/css">
    * {
    padding: 0;
    margin: 0;
    } a {
    text-decoration: none;
    } ul,
    ol {
    list-style: none;
    } input {
    outline: none;
    } img {
    display: block;
    } html,
    body {
    height: 100%;
    overflow: hidden;
    } #wrap {
    width: 100%;
    height: 100%; background-color: #96b377;
    } /**** ****/
    #wrap {
    position: relative;
    } #ul_list {
    overflow: hidden;
    width: 1000%;
    } #wrap #ul_list>li {
    float: left;
    } #wrap #ul_list>li>a>img{
    width: 100%;
    } /**** 小圆点 ****/
    #ol_list {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 75px;
    display: flex;
    justify-content: space-between;
    } #ol_list li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: gray;
    } #ol_list li.active {
    background-color: deeppink;
    }
    </style>
    </head> <body> <!-- 模拟手机屏幕 -->
    <section id="wrap">
    <ul id="ul_list">
    <li>
    <a href="javascript:;"><img src="./img/Deadpool.jpg"/></a>
    </li> <li>
    <a href="javascript:;"><img src="./img/Groot.jpg"/></a>
    </li> <li>
    <a href="javascript:;"><img src="./img/Hock.jpg"/></a>
    </li> <li>
    <a href="javascript:;"><img src="./img/RocketRaccoon.jpg"/></a>
    </li> <li>
    <a href="javascript:;"><img src="./img/SpiderMan.jpg"/></a>
    </li>
    </ul> <ol id="ol_list">
    <li data-pindex="0" class="active"></li>
    <li data-pindex="1"></li>
    <li data-pindex="2"></li>
    <li data-pindex="3"></li>
    <li data-pindex="4"></li>
    </ol>
    </section> <!-- javascript 代码 -->
    <script type="text/javascript">
    // 取消默认行为
    document.addEventListener("touchstart", function(e){
    e.preventDefault();
    }, false); // 点透处理 var clientWidth = document.documentElement.clientWidth;
    // 适配
    (function(){ /* 1. 创建 style 标签 */
    var styleNode = document.createElement("style"); /* 2. 给 style 标签添加内容 (屏幕分份, 大多数公司 16 份) */
    styleNode.innerHTML = "html {"+
    "font-size:"+clientWidth/16+"px !important"+
    "}"; /* IPhone 6 的 font-size: 23.4375px */ /* 3. 把 style 标签追加到 head 标签里 */
    document.head.appendChild(styleNode);
    }()); var wrap = document.getElementById("wrap");
    var ulList = document.getElementById("ul_list");
    var olList = document.getElementById("ol_list"); // 克隆第二组图片
    ulList.innerHTML += ulList.innerHTML;
    var lis = document.querySelectorAll("#ul_list>li");
    var points = document.querySelectorAll("#ol_list>li"); window.onload = function(){
    var styleNode = document.createElement("style");
    styleNode.innerHTML = "#ul_list {width:"+lis.length+"00%;}";
    styleNode.innerHTML += "#ul_list>li {width:"+100/lis.length+"%;}";
    document.head.appendChild(styleNode); styleNode.innerHTML += "#wrap {height:"+lis[0].offsetHeight+"px;}";
    }; // 动态添加属性
    ulList.oldUlX = 0;
    ulList.oldTouchX = 0;
    ulList.curIndex = 0;
    wrap.addEventListener("touchstart", function(e){
    window.clearInterval(ulList.autoTimer);
    var touch = e.changedTouches; // 无缝轮播
    if(ulList.curIndex == 0){
    ulList.curIndex = lis.length/2;
    }else if(ulList.curIndex == lis.length-1){
    ulList.curIndex = lis.length/2-1;
    }
    transformEle(ulList, "translateX", -ulList.curIndex*clientWidth); ulList.oldTouchX = touch[0].clientX;
    ulList.oldUlX = transformEle(ulList, "translateX");
    ulList.style.transition = "0s all ease 0s";
    },false); wrap.addEventListener("touchmove", function(e){
    var touch = e.changedTouches; var newTouchX = touch[0].clientX;
    transformEle(ulList, "translateX", ulList.oldUlX+(newTouchX - ulList.oldTouchX) );
    },false); wrap.addEventListener("touchend", function(){
    ulList.curIndex = Math.round(-transformEle(ulList, "translateX")/clientWidth);
    ulList.style.transition = "1s all ease 0s"; transformEle(ulList, "translateX", -ulList.curIndex*clientWidth); for(var i=0; i<points.length; i++){
    points[i].className = "";
    };
    points[ulList.curIndex%5].className = "active";
    ulList.autoRun();
    },false); olList.addEventListener("touchstart", function(e){
    window.clearInterval(ulList.autoTimer);
    touch = e.changedTouches;
    e.stopPropagation();
    ele = touch[0].target;
    if(ele.nodeName == "LI"){
    for(var i=0; i<points.length; i++){
    points[i].className = "";
    };
    ele.className = "active"; ulList.curIndex = +ele.dataset.pindex;
    transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
    ulList.autoRun();
    };
    }, false); // 自动轮播
    ulList.autoRun = function(){
    window.clearInterval(ulList.autoTimer);
    ulList.autoTimer = window.setInterval(function(){
    // 无缝轮播
    if(ulList.curIndex == lis.length-1){
    ulList.curIndex = lis.length/2-1;
    ulList.style.transition = "0s none";
    transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
    } ulList.curIndex++;
    window.setTimeout(function(){
    ulList.style.transition = "1s all ease 0s";
    transformEle(ulList, "translateX", -ulList.curIndex*clientWidth);
    }, 50); for(var i=0; i<points.length; i++){
    points[i].className = "";
    };
    points[ulList.curIndex%5].className = "active";
    }, 2500-50);
    }; ulList.autoRun(); // 读写 transform 二合一
    function transformEle(ele, attr, val){
    if(!ele.transform){
    ele.transform = {};
    }; var result = "";
    if(arguments.length > 2){
    // 写入操作
    ele.transform[attr] = val; for( var attrStr in ele.transform){
    switch(attrStr){
    case "translate":
    case "translateX":
    case "translateY":
    case "translateZ":{
    result += attrStr+"("+ele.transform[attrStr]+"px) ";
    break;
    }; case "rotate":
    case "rotateX":
    case "rotateY":
    case "rotateZ":
    case "skew":
    case "skewX":
    case "skewY":{
    result += attrStr+"("+ele.transform[attrStr]+"deg) ";
    break;
    }; case "scale":
    case "scaleX":
    case "scaleY":{
    result += attrStr+"("+ele.transform[attrStr]+") ";
    break;
    };
    };
    }; ele.style.transform = result;
    }else{
    // 读取操作
    if(ele.transform[attr]){
    result = ele.transform[attr];
    }else{
    if(attr == 'scale' || attr == 'scaleX' || attr == 'scaleY'){
    result = 1;
    }else{
    result = 0;
    };
    }
    }; return result;
    };
    </script>
    </body>
    </html>

mobile_轮播图_transform 版本_transform 读写二合一的更多相关文章

  1. mobile_轮播图_style_left 版本

    mobile 轮播图 小圆点逻辑(排他) 1. 统一给所有 span 元素加 class=""; 2. 切换到谁,谁的 class="active"; 移动端轮 ...

  2. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  3. iOS swift版本无限滚动轮播图

    之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...

  4. jquery版本轮播图(es5版本,兼容高)

    优势:基于es5,兼容高.切换动画css配置,轻量,不包含多余代码,可扩展性很高,多个轮播图不会冲突,可配置独有namespace 注: 1.项目需要所写,所以只写了页码的切换,未写上一页下一页按钮, ...

  5. 3d轮播图——类似酷狗的轮播

    说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...

  6. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  7. (新手向)基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  8. swift-自定义无限轮播图

    一  前言 1.之前一直在用OC编程,最近才开始接触使用swift就发现使用OC越来越不习惯,感觉已经爱上了swift. 2.这个自定义轮播图只是对之前OC版本进行了翻译,欢迎指正. 3.我决定一步步 ...

  9. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

随机推荐

  1. [再寄小读者之数学篇](2014-06-23 Bernstein's inequality)

    $$\bex \supp \hat u\subset \sed{2^{j-2}\leq |\xi|\leq 2^j} \ra \cfrac{1}{C}2^{jk}\sen{f}_{L^p} \leq ...

  2. topshelf 服务启动运行

    topshlf 服务启动运行方式 安装:servicename.exe install 启动:servicename.exe start 卸载:servicename.exe uninstall

  3. cvc-complex-type.2.4.a: Invalid content was found starting with element 'asy

  4. Ubuntu里设置python默认版本为python3(转载)

    0 - 步骤 在命令行中执行下述命令: sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 sudo ...

  5. SQL Server - JOIN

    JOIN

  6. FTP:mget匹配文件名后下载

    需求:从FTP某目录取每日构建的apk下载到本地 难点:文件名中有构建时间,而这个时间不算固定值,因此文件名不固定 解决方案:mget匹配文件名后下载 BAT版本: :: Filename:Proje ...

  7. ubuntu 16.04扩充root 分区

    ubuntu使用过程中,提示root分区剩余空间不足,剩余200多M时还可以进行一些操作,剩余几M时拷贝等命令都不能够执行. 扩充root分区步骤如下: 1.查看root分区所在位置: 命令: sud ...

  8. 【easy】27. Remove Element

    删除等于n的数,并返回剩余元素个数 Given nums = [3,2,2,3], val = 3, Your function should return length = 2, with the ...

  9. 51nod--1185 威佐夫游戏 V2 (博弈, 乘法模拟)

    题目: 1185 威佐夫游戏 V2 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中 ...

  10. Java框架之spring框架的优点,为什么要学习spring框架

    为什么要学习Spring的框架a: 方便解耦,简化开发    Spring就是一个大工厂,可以将所有对象创建和依赖关系维护,交给Spring管理 b:AOP编程的支持      Spring提供面向切 ...