手机端+PC端无缝滚动

最新推荐文章于 2023-03-21 11:20:29 发布
chuomu8273
最新推荐文章于 2023-03-21 11:20:29 发布
阅读量614
点赞数
文章标签： javascript 移动开发 ViewUI
原文链接：https://my.oschina.net/u/1792175/blog/598086
版权
<!--
    一、由于touchend,touchcancel在安卓浏览器上是有bug,所以采用了百度的touch.js事件
    二、左右箭头部分在手机端自动隐藏
    三、PC上使用左右箭头切换+自动轮播
    四、无线端使用向左向右拖拽，类似京东等手机端轮播效果



    手机端事件：
    - 不支持dbclick
    - touch相关
        + touchstart 按上去的时候触发
        + touchmove 滑动的时候
        + touchend 手指从屏幕离开的时候触发，在安卓手机浏览器上有bug，失效
        + touchcancel 同上
        
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>墨鱼教育</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    html,body{
        width: 100%;
    }
    #wrapper{
        width: 100%;
        height: 200px;
        overflow: hidden;
        position: relative;
    }
    #wrapper .mainList{
        position: absolute;
        height: 200px;
    }
    
    #wrapper .mainList{
        width: 100%;
    }
    #wrapper .mainList li{
        width: 100%;
        height: 200px;
        float:left;
    }
    .sc_prev,
    .sc_next{
        position: absolute;
        width: 10px;
        height: 20px;
        background-color: #000;
        color:#000;
        top:50%;
        margin-top:-10px;
    }
    .sc_prev{
        left:0;
    }
    .sc_next{
        right:0;
    }

    @media screen and (max-width: 800px){
        .sc_prev,
        .sc_next{
            display: none;
        }

    }

    .dottArea{
        position: absolute;
        width: 100%;
        height: 15px;
        bottom:20px;
        left:0;
    }
    .dotList li{
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background-color: #fff;
        margin-right:10px;
        display: inline-block;
    }
    .dotList li:nth-last-child(1){
        margin:0;
    }
    .dotList{
        margin:0 auto;
        height: 15px;
        text-align: center;
    }
    .dotList li.active{
        background-color: purple;
    }
    </style>
    <script>
    var view_timer = null;

    function viewPort(userAgent, pageWidth) {
        var oView = document.getElementById('viewport');
        //判断viewport是否存在，存在就移除掉（为onresize准备）
        if (oView) {
            document.head.removeChild(oView);
        }
        //设计尺寸的宽度，如果不给 默认为640
        if (!pageWidth) {
            pageWidth = 640;
        }
        var screen_w = parseInt(window.screen.width),
            scale = screen_w / pageWidth;
        if (/Android (\d+\.\d+)/.test(userAgent)) {
            var creat_meta = document.createElement('meta');
            creat_meta.name = 'viewport';
            creat_meta.id = 'viewport';
            var version = parseFloat(RegExp.$1);
            if (version > 2.3) {
                creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi';
            } else {
                creat_meta.content = '"width=' + pageWidth + ', target-densitydpi=device-dpi';
            }
            document.head.appendChild(creat_meta);
        } else {
            var creat_meta = document.createElement('meta');
            creat_meta.name = 'viewport';
            creat_meta.id = 'viewport';
            //检测横屏
            if (window.orientation == '-90' || window.orientation == '90') {
                scale = window.screen.height / pageWidth;
                creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
            } else {
                creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
            }
            document.head.appendChild(creat_meta);
        }
    }
    viewPort(navigator.userAgent);

    window.onresize = function () {
        clearTimeout(view_timer);
        view_timer = setTimeout(function(){
            viewPort(navigator.userAgent);
        }, 500)
    }
</script>
</head>
<body>
<div id="wrapper">
    <ul class="mainList">
        <!--轮播的主体，你可以把你的图片等各种东西放在这里面 开始-->
            <li style="background-color:green;"></li>
            <li style="background-color:red;"></li>
            <li style="background-color:yellow;"></li>
        <!--轮播的主体，你可以把你的图片等各种东西放在这里面 结束-->
    </ul>
    <div class="dottArea">
    <!--轮播圆点 开始-->
        <ul class="dotList">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    <!--轮播圆点 结束-->  
    </div>
    <!--左右箭头切换 开始-->
    <a href="javascript:void(0);" class="sc_prev"></a>
    <a href="javascript:void(0);" class="sc_next"></a>
    <!--左右箭头切换 结束-->
</div>
<!--百度touch.js手势库-->
<script src="touch-0.2.14.min.js"></script>
<script>
/*
    思路：
    一、ul和li的宽度用JS算出来的(li的宽度指定为100%，在手机上有问题，手动设置成px)
    二、把第一个li复制一份放最后面，把最后一份li复制到第一个前面
    三、左右箭头 a标签的优势是有hover
    四、有圆点 不支持hover切换，只能看出当前的激活状态
    五、自动轮播
 */ 
    var oWrapper = document.getElementById("wrapper");
    var oUl = oWrapper.getElementsByClassName("mainList")[0];
    var oDotList = oWrapper.getElementsByClassName("dotList")[0];
    var oNext = oWrapper.getElementsByClassName("sc_next")[0];
    var oPrev = oWrapper.getElementsByClassName("sc_prev")[0];
    var aLi = oUl.getElementsByTagName("li");
    var aDottedList = oWrapper.getElementsByClassName("dotList")[0].getElementsByTagName("li");
    var timer = null;
    var flag = true;//防止连续快速点击
    var isAinmate = false;//动画状态中，不支持手动切换

    //把第一个li复制一份到最后一份后面 
    var tempLi = aLi[0].cloneNode(true);
    var tempLi1 = aLi[aLi.length - 1].cloneNode(true);
    oUl.appendChild(tempLi);
    oUl.insertBefore(tempLi1,aLi[0]);

    var perWidth = aLi[0].offsetWidth;
    //设置ul的宽度
    oUl.style.width = perWidth * aLi.length + "px";
    
    //设置li的宽度为具体的象素值
    for(var i=0;i<aLi.length;i++){
        aLi[i].style.width = perWidth + "px";
    }
    //设置ul的left初始值
    var initLeft = - perWidth;
    oUl.style.left = initLeft + "px";

    oPrev.addEventListener("click",function(){
        if(isAinmate==true)return;
        //当前的left值+一个li的宽度
        clearInterval(timer);
        qiehuan(oUl,perWidth,1,initLeft,function(){
            flag = true;
            zidong();
        });
    },true);

    oNext.addEventListener("click",function(){
        if(isAinmate==true)return;
        //当前的left值+一个li的宽度
        clearInterval(timer);
        flag = false;
        qiehuan(oUl,perWidth,-1,initLeft,function(){
            flag = true;
            zidong();
        });
    },true);

    touch.on(oUl, 'swipeleft', function(ev){
                if(isAinmate==true)return;
        //当前的left值+一个li的宽度
        clearInterval(timer);
        flag = false;
        qiehuan(oUl,perWidth,-1,initLeft,function(){
            flag = true;
            zidong();
        });
    });

    touch.on(oUl, 'swiperight', function(ev){
        if(isAinmate==true)return;
        //当前的left值+一个li的宽度
        clearInterval(timer);
        qiehuan(oUl,perWidth,1,initLeft,function(){
            flag = true;
            zidong();
        });
    });



    //定时器自动轮播,自动向左走
    function zidong(){
        if(flag == true){
            timer = setInterval(function(){
                flag = false;
                qiehuan(oUl,perWidth,-1,initLeft,function(){
                    flag = true;
                });
            },3000);
        }
    }
    

    //1代表向右走  -1代表往左走
    function qiehuan(ele,width,direction,initLeft,cb){
        isAinmate = true;
        var totalWidth = ele.offsetWidth;//oUl的总宽度
        var myWidth = ele.offsetLeft + direction*width;
        // ele.style.left = myWidth + "px";

        animate(ele,myWidth,1000,direction,function(){

            if(totalWidth + myWidth <= width){
                ele.style.left = initLeft + "px";
            }

            if(myWidth == 0){
                ele.style.left = -(totalWidth - 2*width) + "px";
            }

            //切换小圆点
            for(var i=0;i<aDottedList.length;i++){
                if(aDottedList[i].className == "active"){
                    aDottedList[i].className = "";
                    if(direction == -1){
                        if(aDottedList[i+1]){
                            aDottedList[i+1].className = "active";
                        }else{
                            aDottedList[0].className = "active";
                        }
                    }else{
                        if(aDottedList[i-1]){
                            aDottedList[i-1].className = "active";
                        }else{
                            aDottedList[aDottedList.length - 1].className = "active";
                        }
                    }
                    
                    break;
                }
            }
            isAinmate = false;
            cb();
        });     
    }


    function animate(ele,left,time,direction,cb){
        var now = Date.now();
        var initLeft = ele.offsetLeft;
        var durationWidth = left - initLeft;

        var timer = setInterval(function(){
            var bili = (Date.now() - now)/time;
            ele.style.left = initLeft + durationWidth*bili + "px";
            if(bili>=1){
                ele.style.left = left + "px";
                clearInterval(timer);
                cb();
            }
        },30);
    }

    //初始化
    function main(){
        zidong();
    }
</script>
</body>
</html>
转载于:https://my.oschina.net/u/1792175/blog/598086