<!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. IntelliJ IDLE

    目录 IntelliJ IDLE java项目结构 代码生成 psvm sout 快捷键 更改代码提示快捷键 代码相关快捷键 窗口相关快捷键 Debug快捷键 主题导入 下载主题 导入主题 应用主题 ...

  2. JetBrains下载历史版本

    https://www.jetbrains.com/clion/download/other.html 在上方的链接中将clion改为idea,phpstrom.webstrom等等

  3. python常量 （最全常量解析）

    常量 一.常量 变量是变化的量,常量则是不变的量.python中没有使用语法强制定义常量,也就是说,python中定义常量本质上就是变量.如果非要定义常量,变量名必须全大写. AGE_OF_NICK ...

  4. 工作笔记之：如何在eclipse安装CVS插件？找了很久的，自己总结一下

    (1)在主目录里“help”→Install New Software.....→The Eclipse Project Updates - http://download.eclipse.org/e ...

  5. jQuery进阶第三天（2019 10.12）

    一.原生JS快捷的尺寸(属性)(注意这些属性的结果 不带PX单位) clientWidth/clientHeight  =====> 获得元素content+padding的宽/高: offse ...

  6. js常见的设计模式一

    1.观察者模式 定义一些一对多的关系,将一系列的观察者对目标函数感兴趣,将自己添加进目标函数,当目标函数状态发生改变时,发送通知,以此通知附加在目标上的观察者 /* 目标 */ class subje ...

  7. git上传代码到code.csdn.net

    国内有code.csdn.net速度很快 用git上传需要去下载git程序 很简单. 我是Windows下 先code.csdn.net创建一个项目 https://code.csdn.net/das ...

  8. 深度复数网络 Deep Complex Networks

    转自:https://www.jiqizhixin.com/articles/7b1646c4-f9ae-4d5f-aa38-a6e5b42ec475  (如有版权问题,请联系本人) 目前绝大多数深度 ...

  9. bean获取Spring容器

    Person.java public class Person implements ApplicationContextAware{ private String name; private int ...

  10. rsync服务实践

    RSYNC数据备份 RSYNC=Remote Sync 远程同步   高效,一定要结合shell 官方网站:https://rsync.samba.org/ Author:     Andrew Tr ...