<!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. Java8与JDK8和JDK1.8有什么区别?

    JDK版本与发行时间 版本 名称 发行日期 JDK 1.0 Oak(橡树) 1996-01-23 JDK 1.1 none(无) 1997-02-19 JDK 1.1.4 Sparkler(宝石) 1 ...

  2. Maven快速安装配置

    环境:windows7_x86  maven3.3.3   maven是管理项目的常用工具,不用安装,直接配置即可.在配置maven前,需要先安装JDK.   1,安装JDK(注意此版本的Maven要 ...

  3. idea无法使用注解@Data解决方法

    @Data相关依赖 <dependency> <groupId>org.projectlombok</groupId> <artifactId>lomb ...

  4. c++ Socket客户端和服务端示例版本一

    客户端 #include <stdio.h> #include <stdlib.h> #include <errno.h> #include <sys/soc ...

  5. hdu 1505 单调栈升级版

    #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #defin ...

  6. C#基础知识之VS的快捷键汇总

    VS中默认的常用快捷键.可以根据自己的习惯,自己设置快捷方式,工具->选项->环境->键盘. 编辑相关的键盘快捷键 Ctrl + K,Ctrl + C = 注释选定行 Ctrl + ...

  7. 一个简单SpringBoot应用的pom.xml文件

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  8. Linux C编程学习

    C语言简介 简介 C语言具有控制特性较强.高效性.可移植性和强大的功能和灵活性."自由的代价是永远的警惕",C的简洁性与其丰富的运算符相结合,使其可能会编写出较难理解的代码.面向对 ...

  9. 【Linux】CentOS6安装jdk1.8

    1.查看官网下载地址 接受协议后,点击下载链接 查看发出的请求,获得下载地址 其中后面的AuthParam参数为本次下载的即时参数,每次都不一样 2.下载安装包 下载完后改个名 wget https: ...

  10. sql中count(1)和count(*)有区别吗

    count(*) 对 innodb 而言,它需要把数据从磁盘中读取出来然后累计计数:而 MyISAM 引擎把一个表的总行数存在了磁盘上,所以执行 count(*) 会直接返回这个数,如果有 where ...