zoukankan      html  css  js  c++  java
  • 移动端轮播完整版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{
    100%;
    height:1.17rem;
    }
    .clearfix:after{
    content:"";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
    }
    .content{
    500%;
    height:1.17rem;
    }
    .content div{
    20%;
    height:1.17rem;
    float:left;
    }
    .content div img{
    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>
  • 相关阅读:
    委托
    Math方法讲解
    正则表达式判断邮件输入的是否正确
    值类型与引用类型作为参数输出的效果
    listView 控件加上选择框
    ?: ?? ? 的区别
    学习思维导图之前先了解这些常识
    PDF文档如何添加图片签名
    CleanMyMac与腾讯柠檬清理软件的简单对比
    如何用思维导图MindManager制作一套学习法
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10861155.html
Copyright © 2011-2022 走看看