zoukankan      html  css  js  c++  java
  • 移动端滑动轮播图

    ---恢复内容开始---

    css样式如下:

    <style>
                *{
                    padding: 0;
                    margin: 0;
                    list-style: none;
                }
                html{
                    font-size: 20px;
                }
                #wrap{
                     16rem;
                    height: 7rem;
                    margin: 0 auto;
                    overflow: hidden;
                }
                #wrap ul{
                     80rem;
                    height: 7rem;
                    transform: translate3d(-16rem,0,0);
                }
                #wrap ul li{
                     16rem;
                    height: 7rem;
                    color: white;
                    font-size: 30px;
                    text-align: center;
                    line-height: 7rem;
                    float: left;
                }
            </style>

    script.js如下:

    代码都有注释

    DOMContentLoaded事件和load事件的区别。
    load事件是window对象上的事件。指的是网页资源已经加载完毕(包括但不限于DOM、图片、音频、脚本、插件资源以及CSS)

    DOMContentLoaded事件是document对象上的事件。指的是DOM已经加载完毕。IE中有个私有的事件onreadystatechange事件跟这个标准事件类似。

    因此DOMContentLoaded事件都会比load事件提前触发

    parse()
    用于从一个字符串中解析出json

    JSON.stringify
    用于从一个对象解析成字符串

          <script>
                document.addEventListener('DOMContentLoaded',function(){
                    var oUl = document.querySelectorAll('#wrap ul')[0];
                    var aLi = oUl.children;
                    var bSing = true;
                    //储存当前在第一个页面
                    var iNow = 1;
                    var x = -iNow * aLi[0].offsetWidth;
                    oUl.addEventListener('touchstart',function(ev){
                        if (bSing == false)return;
                        bSing = false;
                        //手指按下的时候
                        var downX = ev.targetTouches[0].pageX;
                        var disX = downX - x;
                        
                        function fnMove(ev){
                            x = ev.targetTouches[0].pageX - disX;
                            //translate3d 开启手机滑动硬件加速
                            oUl.style.WebkitTransform ='translate3d(' + x + 'px,0,0)';
                        };
                        
                        function fnEnd(ev){
                            //清除两个事件
                            oUl.removeEventListener('touchmove',fnMove,false);
                            oUl.removeEventListener('touchend',fnEnd,false);
                            
                            //手指抬起的时候
                            var upX = ev.changedTouches[0].pageX;
                            //有个transition 动画效果
                            oUl.style.WebkitTransition = 'all .3s ease';
                            //从左到右滑动时是负数,所以要用Math.abs()
                            if (Math.abs(upX - downX) > 80) {
                                //切换到下一张
                                if (downX > upX) {
                                    //当前页面 ++ 
                                    iNow ++;
                                    if (iNow == aLi.length)iNow = aLi.length - 1;
                                } else{
                                    //否则 --
                                    iNow --;
                                    if (iNow == -1)iNow = 0;
                                };
                            }; 
                            x = -iNow * aLi[0].offsetWidth;
                            //再次执行transition 动画效果
                            oUl.style.WebkitTransform = 'translate3d(' + x + 'px,0,0)';
                        
                            //运动结束的标志
                                function moveEnd(){
                                    bSing = true;
                                    //清除transition 动画效果
                                    oUl.removeEventListener('transitionend',moveEnd,false);
                                    //左边
                                    if(iNow == aLi.length - 1){
                                        iNow = 1;
                                        x = -iNow * aLi[0].offsetWidth;
                                        oUl.style.WebkitTransition = 'none';
                                        oUl.style.WebkitTransform = 'translate3d(' + x + 'px,0,0)';
                                    }
                                    //右边
                                    if (iNow == 1) {
                                        iNow = 3;
                                        x = -iNow * aLi[0].offsetWidth;
                                        oUl.style.WebkitTransition = 'none';
                                        oUl.style.WebkitTransform = 'translate3d(' + x + 'px,0,0)';
                                    }
                                    document.title = iNow;
                                }
                                //监听transition动画效果
                            oUl.addEventListener('transitioned',moveEnd,false);
                        };
                        //监听move&end事件
                        oUl.addEventListener('touchmove',fnMove,false);
                        oUl.addEventListener('touchend',fnEnd,false);
                        //阻止默认事件
                        ev.preventDefault();
                    },false);
                },false);
            </script>

    body内容如下:

    <div id="wrap">
          <ul>
              <li style="background: slateblue;">Slide 3</li>
              <li style="background: salmon;">Slide 1</li>
              <li style="background: skyblue;">Slide 2</li>
              <li style="background: slateblue;">Slide 3</li>
              <li style="background: salmon;">Slide 1</li>
           </ul>
    </div>

    具体情况看自己需求,如有什么不明白私信或留言给我。

    ---恢复内容结束---

  • 相关阅读:
    day01--计算机硬件基础笔记
    22 Jun 18 Django,ORM
    21 Jun 18 Django,ORM
    20 Jun 18 复习, mysql
    20 Jun 18 Django,ORM
    19 Jun 18 复习, 正则表达式
    19 Jun 18 Django
    15 Jun 18 复习, shutil模块
    15 Jun 18 Django
    14 Jun 18 复习, form表单
  • 原文地址:https://www.cnblogs.com/Mousika/p/7242264.html
Copyright © 2011-2022 走看看