移动端滑动轮播图

Posted 2020-09-30

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

css样式如下:

<style>
            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            html{
                font-size: 20px;
            }
            #wrap{
                width: 16rem;
                height: 7rem;
                margin: 0 auto;
                overflow: hidden;
            }
            #wrap ul{
                width: 80rem;
                height: 7rem;
                transform: translate3d(-16rem,0,0);
            }
            #wrap ul li{
                width: 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>

 

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

 

 

 

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