<Divclass= "Slider"> <Divclass= "Pic"ID= "Pic"> <DivID= "BG1"class= "BG Fadein"></Div> <DivID= "Bg2"class= "BG"></Div> <DivID= "Bg3"class= "BG"></Div> <DivID= "Bg4"class= "BG"></Div> <DivID= "Bg5"class= "BG"></Div> </Div> <ulclass= "BTN"ID= "BTN"> <Liclass= "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);p ic.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);p ic.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 ');}
Mobile-side Carousel Plugin