移动端入门之轮播图

作者: 柠檬树QAQ | 来源:发表于2017-02-07 22:57 被阅读0次

移动端入门之轮播图
轮播组件——基于原生 && Vue
移动端轮播图
js-插件/框架
Axure原型设计——轮播图
JavaScript touch / 实现一个支持手势滑动的轮播
CSS3 swiper框架
微信小程序学习-轮播图组件swiper
JavaScript十二 - 移动端触摸事件
vue移动端轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端轮播图</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
*{ margin:0; padding:0; list-style:none;}
html{ font-size:20px;}
#box{width:16rem;height:7.5rem; margin:0 auto; overflow:hidden;}

    #box ul{width:64rem; overflow:hidden;}
    #box ul li{width:16rem; height:7.5rem; float:left; text-align:center; line-height:7.5rem; font-size:2rem; color:#fff;}
</style>
<script>
    //rem自适应转换
    (function(win,doc){
        function change(){
            doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/320+'px';
        }
        change();

        win.addEventListener('resize',change,false);
    })(window,document)
    document.addEventListener('DOMContentLoaded',function () {
        var oUl=document.querySelector('#box ul');
        var aLi=oUl.children;
        var x=0;
        var n=0;
        oUl.addEventListener('touchstart',function (ev) {
            oUl.style.webkitTransform='none';
            var downX=ev.targetTouches[0].pageX;
            var disX=downX-x;
            function fnMove(ev) {
                x=ev.targetTouches[0].pageX-disX;
                oUl.style.webkitTransform='translate3d('+x+'px,0,0)'
            }
            function fnEnd(ev) {
                var upX=ev.changedTouches[0].pageX;
                oUl.style.transition='0.4s all ease';
                if(Math.abs(upX-downX)>50){
                    if(downX>upX){
                        n++;
                        if(n==aLi.length)n=aLi.length-1;
                        x=-n*aLi[0].offsetWidth;
                        oUl.style.webkitTransform='translate3d('+x+'px,0,0)'
                    }else{
                        n--;
                        if(n==-1)n=0;
                        x=-n*aLi[0].offsetWidth;
                        oUl.style.webkitTransform='translate3d('+x+'px,0,0)'
                    }

                }
                oUl.removeEventListener('touchend',fnEnd,false)
                oUl.removeEventListener('touchmove',fnMove,false)
            }
            oUl.addEventListener('touchend',fnEnd,false)
            oUl.addEventListener('touchmove',fnMove,false)
            ev.preventDefault();
        },false)

    },false)
</script>

</head>
<body>
<div id="box">
<ul>
<li style=" background:red;">0</li>
<li style=" background:blue;">1</li>
<li style=" background:green;">2</li>
<li style=" background:#499;">3</li>
</ul>
</div>
</body>
</html>