7、滑屏轮播——自动播放加无缝循环

最新推荐文章于 2021-06-11 10:32:14 发布

信封中的阳光

最新推荐文章于 2021-06-11 10:32:14 发布

阅读量698

点赞数

分类专栏：学习笔记——移动端滑屏

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/53155625

版权

学习笔记——移动端滑屏专栏收录该内容

8 篇文章 0 订阅

订阅专栏

7、滑屏轮播——自动播放加无缝循环

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=no" />
        <title>滑屏轮播——自动播放加无缝循环版</title>
        <!--
              需要掌握知识点：
                1、自动播放;
                2、定义全局now变量：使自动播放与手动滑屏相关联
        -->
        <style id="css">
            body{
                margin: 0;
            }
            #wrap{
                overflow: hidden;
                position: relative;
            }
            #list{
                margin: 0;
                padding: 0;
                list-style: none;
                /*overflow: hidden;*/
               /*position: absolute;*/
            }
            #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');
                list.innerHTML+=list.innerHTML;//把滚动层的内容多复制一份
                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;//设置这个值在CHROME模拟器下list不运动，解决办法
                                            //1、去掉这个变量
                                            //2、给list设置overflow:hidden
                                            //3、给list设置position:absolute;
                var timer=null;//创建一个变量后面用于储存定时器
                var now=0;//定义全局的变量now让自动播放的图片与滑屏移到的相关联

                cssTransform(list,"translateX",0);//设置滚动层的初始化的translateX值
                autoPlay();//自动播放
                wrap.addEventListener(
                    "touchstart",
                    function(e){//0,1,2,3,
                                //4,5,6,7
                                //共8张，原理是当按下时位于0位时，瞬间移动到第4个，因为两张图是一样的所以视觉上不会有感觉
                                //当按下7位时，瞬间移动到第3个，从而产生无缝循环的感觉。
                        clearInterval(timer);//每次滑屏时清除定时器
                        list.style.transition="none";//为了不在视觉上感觉到，所以要把transition清空，同时也是因为move时不需要transition
                        var translateX=cssTransform(list,"translateX");
                        now=-Math.round(translateX/wrapW);
                        if(now==0){//原理是当按下时位于0位时，瞬间移动到第4个，因为两张图是一样的所以视觉上不会有感觉
                            now=navSpan.length;
                        }
                        if(now==(lis.length-1)){//当按下7位时，瞬间移动到第3个
                            now=navSpan.length-1;
                        }
                        cssTransform(list,"translateX",-now*wrapW);
                        var touch = e.changedTouches[0];
                        startPoint=touch.pageX;//移到过后再获取手指按下时手指距离屏幕X轴的距离
                        startX=cssTransform(list,"translateX");//移到过后再获取手指按下时滚动层UL的translateX位移值

                    }
                );
                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");
                        //判断移动超过一半时自动移动下一张，未到一半时回到当前张
                        now = Math.round(-translateX/wrapW);
                        picTab();
                        autoPlay();
                    }
                );

                //定义自动播放的函数
                function autoPlay(){
                    clearInterval(timer);
                    timer=setInterval(function(){
                        if(now==lis.length-1){
                            now=navSpan.length-1;
                        }
                        list.style.transition="none";
                        cssTransform(list,"translateX",-now*wrapW);
                        setTimeout(function(){
                            now++;
                            picTab();
                        },30);
                    },2000);
                }
                //定义图片切换的函数
                function picTab(){
                    list.style.transition="0.5s";
                    cssTransform(list,"translateX",-now*wrapW);
                    for(var i=0;i<navSpan.length;i++){
                        navSpan[i].className="";
                    }
                    navSpan[now%navSpan.length].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

收藏

觉得还不错? 一键收藏
0
评论
7、滑屏轮播——自动播放加无缝循环

7、滑屏轮播——自动播放加无缝循环<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>滑屏轮播——自动播放加无缝循环版</title>
复制链接

扫一扫

专栏目录