移动端横滑屏轮播图

图片说明移动端轮播图的实现方式有很多种，最常见的就是定位+手指事件。但是我这里介绍的是CSS3中的2d变换和手指事件，因为变换属性的代码更加简洁优雅。1.移动端准备*{padding:0;margin:0;}img{display:block;}li{list-style:none;}input{outline:none;}a{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}html,body{高度:100%;overflow:hidden;}CSS中的初始化//防止浏览器默认行为document.addEventListener("touchstart",function(event){event.preventDefault()});//remadaptation(function(){varstyleNode=document.createElement("style")varwidth=document.documentElement.clientWidthstyleNode.innerHTML='html{font-size:'+width/16+'px;}'document.head.appendChild(styleNode)})();//touch(function(){varaNodes=document.querySelectorAll("a")for(vari=0;i

li>varlist=document.querySelector(".list")varli=documentlist.innerHTML+=list.innerHTMLvarstartX=0vareleX=0vartranslateX=0varnow=0list.addEventListener("touchstart",函数n(event){list.style.transition='none'if(now==0){now=5}elseif(now==9){now=4}transformCss(list,"translateX",-now*document.documentElement.clientWidth)vartouch=event.changedTouches[0]startX=touch.clientXeleX=transformCss(list,"translateX")})list.addEventListener("touchmove",function(event){vartouch=event.changedTouches[0]varendX=touch.clientXvardisX=endX-startXtranslateX=disX+eleX//清除过渡list.style.transition='none'list.style.transform=transformCss(list,'translateX',translateX)})list.addEventListener("touchend",function(){varleft=transformCss(list,'translateX')now=Math.round(-left/document.documentElement.clientWidth)translateX=-now*document.documentElement.clientWidthlist.style.transition='0.5s'transformCss(list,'translateX',translateX)})这里设计的无缝轮播非常巧妙。li标签复制一份，即一共10张图片。当我们滑动到第1张图片时，点击后快速切换到第6张图片，当我们滑动到最后一张图片时，我们切换到第5张图片。3.自动轮播+点逻辑varautoSlide=function(){setInterval(function(){if(now==9){now=4}list.style.transition='none'transformCss(list,'translateX',-now*document.documentElement.clientWidth)//设置过渡生效的延迟setTimeout(function(){now++list.style.transition='0.5s'transformCss(list,'translateX',-now*document.documentElement.clientWidth)for(vari=0;i