4、滑屏轮播——加transition版

来源：互联网发布：纵队知乎编辑：程序博客网时间：2024/05/17 02:36
4、滑屏轮播——加transition版

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width,user-scalable=no" />        <title>滑屏轮播——加transition版</title>        <!--            需要掌握知识点：                1、加入transition过渡                2、左右移动未做限制，现超出会报错;        -->        <style id="css">            body{                margin: 0;            }            #wrap{                overflow: hidden;                position: relative;            }            #list{                margin: 0;                padding: 0;                list-style: none;            }            #list li{                float: left;            }            #list img{                width: 100%;                display: block;            }            #nav{                position: absolute;                bottom: 10px;                left: 0;                width: 100%;                text-align: center;            }            #nav span{                display: inline-block;                width: 10px;                height: 10px;                border-radius: 5px;                background: black;            }            #nav .active{                background: #fff;            }            .clear:after{/* 用于清除浮动 */                 content: "";                display: block;                clear: both;            }        </style>        <script type="text/javascript" src="cssTransform.js" ></script>        <script>            document.addEventListener(                //用于阻止系统默认的菜单、文字默认选中、橡皮筋回弹效果                //缺点：系统默认滚动条消失                "touchstart",                function(e){                    e.preventDefault();                }            );            window.onload = function(){                var wrap=document.querySelector('#wrap');                var list=document.querySelector('#list');                var lis=document.querySelectorAll('#list li');                var navSpan=document.querySelectorAll('#nav span');                //用JS动态设置wrap的高度和ul、li的width;                var css=document.querySelector('#css');                var style="#wrap{height:"+lis[0].offsetHeight+"px;}";                style+="#list{width:"+lis.length*100+"%}";                style+="#list li{width:"+(1/lis.length)*100+"%}";                css.innerHTML+=style;                var startPoint=0;//用于储存手指按下的坐标                var startX=0;//用于储存手指按下时滚动层UL的translateX位移值                var wrapW=wrap.offsetWidth;//wrap的占位宽                cssTransform(list,"translateX",0);//设置滚动层的初始化的translateX值                wrap.addEventListener(                    "touchstart",                    function(e){                        var touch = e.changedTouches[0];                        startPoint=touch.pageX;//手指按下时手指距离屏幕X轴的距离                        startX=cssTransform(list,"translateX");//手指按下时滚动层UL的translateX位移值                        list.style.transition="none";//因为move时不需要过渡，所以在每次start时清空transition                    }                );                wrap.addEventListener(                    "touchmove",                    function(e){                        var touch=e.changedTouches[0];                        var nowPoint=touch.pageX;//手指移动时手指距离屏幕X轴的距离                        var distance=nowPoint-startPoint;//手指移动时距离                        cssTransform(list,"translateX",startX+distance);//设置手指移动时的translateX                    }                );                wrap.addEventListener(                    "touchend",                    function(){                        var translateX=cssTransform(list,"translateX");                        //判断移动超过一半时自动移动下一张，未到一半时回到当前张                        var now = Math.round(-translateX/wrapW);                        translateX = -now*wrapW;                        list.style.transition="0.5s";//每次end时重新设置transition                        cssTransform(list,"translateX",translateX);                        //下面的pagination跟随图片一起更新位置                        for(var i=0,len=lis.length;i<len;i++){                            navSpan[i].className="";                        }                        navSpan[now].className="active";                    }                );            }        </script>    </head>    <body>        <div id="wrap"><!-- 包裹层 -->            <ul id="list" class="clear"><!-- 滑动层 -->                <li><a href="#"><img src="img/1.jpg"/></a></li>                <li><a href="#"><img src="img/2.jpg"/></a></li>                <li><a href="#"><img src="img/3.jpg"/></a></li>                <li><a href="#"><img src="img/4.jpg"/></a></li>            </ul>            <nav id="nav"><!-- 底部按钮 -->                <span class="active"></span>                <span></span>                <span></span>                <span></span>            </nav>        </div>    </body></html>
0 0