手机端的轮播效果

Posted 2020-07-25 junwu

手机端轮播效果，貌似以后能用得上吧

首先是结构html

    <section class="page pageshow">
        <section id="tabPic">
            <ul id="picList">
                <li href="javascript:;"><img src="image/1.jpg" ></li>
                <li href="javascript:;"><img src="image/2.jpg" ></li>
                <li href="javascript:;"><img src="image/3.jpg" ></li>
                <li href="javascript:;"><img src="image/4.jpg" ></li>
                <li href="javascript:;"><img src="image/5.jpg" ></li>
            </ul>
            <section class="picMask">
                <p>成都九寨沟</p>
                <nav>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </nav>
            </section>
        </section>
    </section>

css

        *{margin:0px;padding:0px;}
        ul{list-style:none;}
        #tabPic { position:relative; overflow:hidden;}
        #picList { width:500%; }
        #picList li{ width:20%; float:left;}
        #picList li img { width:100%; height:342px;}
        .picMask{ height:102px; position:absolute;left:0px; bottom:0; width:100%; background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.9) 0,rgba(0,0,0,0.8) 10%,rgba(0,0,0,0))}
        .picMask p {font-size:29px;line-height:120px; color:#fff; text-indent:26px;}
        .picMask nav { position:absolute; right:26px; top:56px;}
        .picMask nav a { width:10px; height:10px; background:white; border-radius:5px; float:left; margin-left:15px;}

js代码

 

function id(obj) {
    return document.getElementById(obj);
}
function bind(obj, ev, fn) { 
    if (obj.addEventListener) {
        obj.addEventListener(ev, fn, false);
    } else {
        obj.attachEvent(‘on‘ + ev, function() {
            fn.call(obj);
        });
    }
}
function view() {
    return {
        w: document.documentElement.clientWidth,
        h: document.documentElement.clientHeight
    };
}
function addClass(obj, sClass) { 
    var aClass = obj.className.split(‘ ‘);
    if (!obj.className) {
        obj.className = sClass;
        return;
    }
    for (var i = 0; i < aClass.length; i++) {
        if (aClass[i] === sClass) return;
    }
    obj.className += ‘ ‘ + sClass;
}

function removeClass(obj, sClass) { 
    var aClass = obj.className.split(‘ ‘);
    if (!obj.className) return;
    for (var i = 0; i < aClass.length; i++) {
        if (aClass[i] === sClass) {
            aClass.splice(i, 1);
            obj.className = aClass.join(‘ ‘);
            break;
        }
    }
}
function fnTab()
{
    var oTab=id("tabPic");
    var oList=id("picList");
    var aNav=oTab.getElementsByTagName("nav")[0].children;
    var iNow=0;
    var iX=0;
    var iW=view().w;
    var oTimer=0;
    var iStartTouchX=0;
    var iStartX=0;
    bind(oTab,"touchstart",fnStart);
    bind(oTab,"touchmove",fnMove);
    bind(oTab,"touchend",fnEnd);
    auto();
    if(!window.BfnScore)
    {
        fnScore();
        window.BfnScore=true;
    }
    function auto()
    {
        oTimer=setInterval(function(){
            iNow++;    
            iNow=iNow%aNav.length;
            tab();
        },2000);
    }
    function fnStart(ev)
    {
        oList.style.transition="none";
        ev=ev.changedTouches[0];
        iStartTouchX=ev.pageX;
        iStartX=iX;
        clearInterval(oTimer);
    }
    function fnMove(ev)
    {
        ev=ev.changedTouches[0];
        var iDis=ev.pageX-iStartTouchX;
        iX=iStartX+iDis;
        oList.style.WebkitTransform=oList.style.transform="translateX("+iX+"px)";
    }
    function fnEnd()
    {
        iNow=iX/iW;
        iNow=-Math.round(iNow);
        if(iNow<0)
        {
            iNow=0;
        }
        if(iNow>aNav.length-1)
        {
            iNow=aNav.length-1;
        }
        tab();
        auto();
    }
    function tab()
    {
        iX=-iNow*iW;
        oList.style.transition="0.5s";
        oList.style.WebkitTransform=oList.style.transform="translateX("+iX+"px)";
        for(var i=0;i<aNav.length;i++)
        {
            removeClass(aNav[i],"active");
        }
        addClass(aNav[iNow],"active");
    }
}