<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="rem插件.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html{
            font-size:100px;
            overflow-x:hidden;
        }
        body{
            font-size:14px;
        }
        div,ul,li,img{
            margin:0;
            padding:0;
        }
        .box{
            width:100%;
            height:1.17rem;
        }
        .clearfix:after{
            content:"";
            display:block;
            height:0;
            visibility:hidden;
            clear:both;
        }
        .content{
            width:500%;
            height:1.17rem;
        }
        .content div{
            width:20%;
            height:1.17rem;
            float:left;
        }
        .content div img{
            width:100%;
            height:1.17rem;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            <div><img src="img/05.jpg" /></div>
            <div><img src="img/01.jpg" /></div>
            <div><img src="img/04.jpg" /></div>
            <div><img src="img/05.jpg" /></div>
            <div><img src="img/01.jpg" /></div>
        </div>
    </div>
</body>
</html>
<script>
    var t=null,index=1,startind=0,moveind=0,distance=0;
    var box=document.querySelector(".box");
    var wid=box.offsetWidth;
    var content=document.querySelector(".content");
    content.style.transform="translateX(-"+(wid)+"px)";
    t=setInterval(function(){
        index++;
        addtransition()
        content.style.transform="translateX(-"+(wid*index)+"px)";
    },2000)
    //过度函数
    function addtransition(){
        content.style.transition="all .3s linear";
        content.style.webkitTransition="all .3s linear";
    }
    function removetransition(){
        content.style.transition="none";
        content.style.webkitTransition="none";
    }
    content.addEventListener("transitionend",function(){
        if(index>3){
            index=1;
            removetransition()
            content.style.transform="translateX(-"+(wid*index)+"px)";
        }
        else{
            if(index<1){
                index=3;
                removetransition()
                content.style.transform="translateX(-"+(wid*index)+"px)";
            }
        }
    })
    content.addEventListener("touchstart",function(e){
        clearInterval(t);
        startind=e.touches[0].clientX;
    })
    content.addEventListener("touchmove",function(e){
        moveind=e.touches[0].clientX;
        distance=moveind-startind;
        content.style.transform="translateX(-"+(wid*index-distance)+"px)";
    })
    content.addEventListener("touchend",function(e){
        if(Math.abs(distance)<wid/3){
            content.style.transform="translateX(-"+(wid*index)+"px)";
            addtransition()
        }
        else{
            if(distance<0){
                // 左移
                index++;
                content.style.transform="translateX(-"+(wid*index)+"px)";
                addtransition();
            }
            else{
                index--;
                content.style.transform="translateX(-"+(wid*index)+"px)";
                addtransition();
            }

        }
        t=setInterval(function(){
            index++;
            addtransition()
            content.style.transform="translateX(-"+(wid*index)+"px)";
        },2000)

        startind=0;
        moveind=0;
        distance=0;
    })
</script>

移动端轮播完整版css3加原生写法的更多相关文章

  1. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  2. iOS最笨的办法实现无限轮播图（网络加载）

    iOS最笨的办法实现无限轮播图(网络加载) 简单的做了一下: 使用方法: 把 请求返回的 图片地址(字符串类型)放进数组中就行 可以使用SDWebImage(我就是用的这个)等..需要自己导入并引用, ...

  3. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

  4. C-Swipe Mobile 一个适用于Vue2.x的移动端轮播组件

    近期在做的一个Vue2项目里需要一个可以滑动的轮播组件,但是又因为现有的传统轮播库功能过于繁琐和笨重.因此自己写了一个针对于Vue2.x的轻型轮播组件. 项目GitHub链接:C-Swipe Mobi ...

  5. 移动端轮播图vue-awesome-swiper

    日常写设计文档,日常写Demo,写轮播图的时候觉得bootstrap不适合移动端,或者说不是轻量级的,于是换成Swiper,但是写的时候才发现怎么把这东西嵌到Vue里面啊? Σ( ° △ °|||)︴ ...

  6. 告别组件之教你使用原生js和css写移动端轮播图

    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...

  7. Swiper 轮播插件 之 动态加载无法滑动

    1.原因:轮播图未完全动态加载完成,即初始化 2.方法一:ajax链式编程 $.ajax({ type: "get", url: serviceURL + "/listB ...

  8. 移动端轮播图实现方法（dGun.js）

    本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...

  9. 关于Layui 响应式移动端轮播图的问题

    用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper // 轮播图 layui.use('carousel', function () { var ...

随机推荐

  1. MySQL索引，备份和还原

    1.索引  1.索引是占硬盘空间 ,也是按页存放的 . 思考题:一个索引页,(数据页)  占用多少个字节  .SQL Server 8192个字节 2.索引:是一种有效组合数据的方式,为了快速查找指定 ...

  2. HNUSTOJ-1695 跳格子(略感头疼)

    1695: 跳格子 时间限制: 1 Sec  内存限制: 128 MB提交: 230  解决: 57[提交][状态][讨论版] 题目描述 逸夫楼的大厅的地面有10行10列的石砖,我们用坐标(x,y)来 ...

  3. 搜索专题：HDU1241 Oil Deposits

    Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...

  4. mysqldump: [Warning] Using a password on the command line interface can be insecure.

    MySQL 5.6 警告信息 command line interface can be insecure 修复 在命令行输入密码,就会提示这些安全警告信息. Warning: Using a pas ...

  5. webpack自定义loader和自定义插件

    1.封装自定义的功能loader (格式很简单,重点在于loader-utils,loaderUitls.getOptions可获取webpack配置rules中的options以供使用 ) 这只是一 ...

  6. 混合加密算法(RSA和DES)

    一.混合加密的理由 a.前面提及了RSA加解密算法和DES加解密算法这两种加解密算法,由于随着计算机系统能力的不断发展,DES的安全性比它刚出现时会弱得多,追溯历史破解DES的案例层出不穷,一台实际的 ...

  7. tr 替换或删除字符

    1.命令功能 tr 从标准输入中替换,压缩间隔或者删除字符并从定向到标准输出. 2.语法格式 tr  option  SET1  SET2 参数 参数说明 -c 取代所有SET1中字符串 -d 删除所 ...

  8. 组件通信 eventtBus

    平级组件的通信 一个全局发布订阅模式,它是挂载到全局的 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. FAT12 img tool

    NJU/2019/OS Description: CODE: Main.cpp: /* @author: Edwin Xu @Date:2019/11/13 @Note: just ASCII */ ...

  10. 【串线篇】spring boot使用外置的Servlet容器

    嵌入式Servlet容器:应用打成可执行的jar 优点:简单.便携: 缺点:默认不支持JSP.优化定制比较复杂 (使用定制器[ServerProperties/自定义EmbeddedServletCo ...