<!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. Apache 强制SSL访问

    RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R ...

  2. Hive调优参数配置

    Hive进行大数据处理的过程中经常遇到一个任务跑几个小时或者内存溢出等问题,平时会任务执行的遇到的问题 进行参数的调整配置,收集整理的配置参考如下: set dfs.namenode.handler. ...

  3. Luogu P1315 [NOIP2012]观光公交

    题目 每次把加速器用在可以是答案减少最多的地方就即可.(这不是废话吗?) 具体而言,我们处理出: \(sum_i\)到\(i\)为止下车人数之和. \(t_i\)在\(i\)最晚的上车的人的上车时间. ...

  4. [Codeforces 1214A]Optimal Currency Exchange(贪心)

    [Codeforces 1214A]Optimal Currency Exchange(贪心) 题面 题面较长,略 分析 这个A题稍微有点思维难度,比赛的时候被孙了一下 贪心的思路是,我们换面值越小的 ...

  5. java int转Short

    使用short(xx) problemMultipleChoiceDO.setExamCount((short)0);//在数据库中是smallint类型

  6. 计算机体系结构总结_Pipeline

    Textbook:<计算机组成与设计——硬件/软件接口>  HI<计算机体系结构——量化研究方法>          QR 在前面一节里我们有了一块简单的RISC CPU,包括 ...

  7. js/nodejs导入Excel相关

    导入示例如下: Excel可设置单元格的数字显示格式,特别的,常规格式下,会根据列宽缩进显示. 实际中,有时需要导入实际值,有时需要导入显示值. 而B2的显示值,由于跟列宽相关,目前未找到任何软件,可 ...

  8. 41. First Missing Positive (JAVA)

    Given an unsorted integer array, find the smallest missing positive integer. Example 1: Input: [1,2, ...

  9. MySQL索引的分类、结构、使用场景

    MySQL索引分类 1.主键索引:设定为主键后数据库会自动建立索引,innodb为聚簇索引 语法: 随表一起建索引: CREATE TABLE customer (id INT(10) UNSIGNE ...

  10. 从零开始学MySQL(四)

    上节连接:https://www.cnblogs.com/RajXie/p/10880809.html 上节说到,在创建表的同时,需要给出列的定义.列的定义可展开如下: 列名 列的数据类型 列的一些其 ...