移动端轮播完整版css3加原生写法

<!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加原生写法

最新文章

热门文章
