移動端輪播外掛程式

標籤：

<div class="slider">    <div class="pic" id="pic">        <div id="bg1" class="bg fadein"></div>        <div id="bg2" class="bg"></div>        <div id="bg3" class="bg"></div>        <div id="bg4" class="bg"></div>        <div id="bg5" class="bg"></div>    </div>    <ul class="btn" id="btn">        <li class="active"></li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>    </ul></div>css.slider{position:relative;width:100%;height:100%}.bg{position:absolute;left:0;top:0;width:100vw;height:100vh;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity 1s linear;-moz-transition:opacity 1s linear;-ms-transition:opacity 1s linear;-o-transition:opacity 1s linear;transition:opacity 1s linear}#bg1{background:url(https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=5b8ce96a0af431adbc8710792d0b989d/63d9f2d3572c11df40d7b3db652762d0f603c2c0.jpg) no-repeat;background-size:cover}#bg2{background:url(https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=bbc9424198510fb3784c24d7bf0efca7/9825bc315c6034a803dbb479cd13495409237608.jpg) no-repeat;background-size:cover}#bg3{background:url(https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=2725a1ea740e0cf3a0a21dbb6c7bc62d/faedab64034f78f04041960b7f310a55b2191cfb.jpg) no-repeat;background-size:cover}#bg4{background:url(https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=5b8ce96a0af431adbc8710792d0b989d/63d9f2d3572c11df40d7b3db652762d0f603c2c0.jpg) no-repeat;background-size:cover}#bg5{background:url(https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/super/whfpf%3D425%2C260%2C50/sign=bbc9424198510fb3784c24d7bf0efca7/9825bc315c6034a803dbb479cd13495409237608.jpg) no-repeat;background-size:cover}*{margin:0;padding:0}.btn{position:fixed;bottom:50px;width:100%;height:30px;text-align:center}.btn li{float:left;width:20%;height:5px;text-indent:-999px;background:grey}.fadein{opacity:1;filter:alpha(opacity=100)}.btn li.active{background:red}li{list-style-type:none}.pic{width:100vw;height:100vh}.box{width:400px;height:400px;background:red}body{height:3000px}jsvar pic=document.getElementById(‘pic‘);var touchx= 0,    alreadymove=true,    currentimg= 0,    imglen=document.getElementsByClassName(‘bg‘).length;pic.addEventListener(‘touchstart‘, function (e) {    e.preventDefault();    if(alreadymove){        var touched= e.touches[0];        touchx= touched.pageX;        alreadymove=false;    }},false);pic.addEventListener(‘touchmove‘, function (e) {    if(!alreadymove){        var touched= e.changedTouches[0];        var offsetX=touched.pageX;        if(offsetX+20 <touchx){            if( currentimg >= imglen-1){                currentimg=0;            }else{                currentimg++;            }            showpic(currentimg);            alreadymove=true;        }        if(offsetX-20 >touchx){            if(currentimg<=0){                currentimg=imglen-1;            }else{                currentimg--;            }            showpic(currentimg);            alreadymove=true;        }    }},false);pic.addEventListener(‘touchend‘, function (e) {    e.preventDefault();},false);function showpic(index){    /*hide all pic first*/    hideall();    /*show the index pic*/    var allpic=document.getElementsByClassName(‘bg‘);    allpic[index].classList.add(‘fadein‘);    /*show the index btn*/    showbtn(index);}function hideall(){    var allpic=document.getElementsByClassName(‘bg‘);    Array.prototype.forEach.call(allpic, function (element,index,array) {        element.classList.remove(‘fadein‘);    });}function showbtn(index){    var btns=document.getElementById(‘btn‘).getElementsByTagName(‘li‘);    Array.prototype.forEach.call(btns, function (element,index,array) {       element.classList.remove(‘active‘);    });    btns[index].classList.add(‘active‘);}

 

移動端輪播外掛程式