嗯、刚接触移动端不久,可能写的不是特别的完美,或许还会有bug,如果您看到了有哪些地方做的不是特别的好,或者您有更好的意见,欢迎在留言区指出,吾将不胜感激,当然我也会随着学习的深入,不断回来完善,尽量做到完美
话不多说,上代码:(注:css代码没有附带,有兴趣的可以留言区留言)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no"/> <link rel="stylesheet" href="less/event.css"/> <script> (function(){ var html = document.documentElement; var hWidth = html.getBoundingClientRect().width; var scale = hWidth/15; html.style.fontSize = scale+'px'; })() document.addEventListener('touchstart',function(ev){ ev.preventDefault(); }) </script> <title>图片无缝滚动</title> </head> <body> <section> <ul id="list"> <li><img src="img/img4.jpg"/></li> <li><img src="img/img.jpg"/></li> <li><img src="img/img2.jpg"/></li> <li><img src="img/img3.jpg"/></li> <li><img src="img/img4.jpg"/></li> <li><img src="img/img.jpg"/></li> </ul> <div id="dot"><a class="active" href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></div> </section> <script> window.onload = function(){ var oList = document.querySelector('#list'); var aLi = oList.querySelectorAll('li'); var oDot = document.querySelector('#dot'); var oA = oDot.querySelectorAll('a'); var len = aLi.length; var num = oA.length; var disX = 0; var disL = 0; var dL = 0; var w = aLi[0].offsetWidth; var n = 0; oList.addEventListener('touchstart',start); oList.addEventListener('touchmove',move); oList.addEventListener('touchend',end); function start(ev){ var ev = ev.changedTouches[0]; disX = ev.pageX; disL = oList.offsetLeft; oList.style.transition = null; if(disL ==0){ disL = -w*num; oList.style.left = disL+'px'; } //console.log(w*(len-1)) if(disL ==-w*(len-1)){ disL = -w; oList.style.left = disL+'px'; } } function move(ev){ var ev = ev.changedTouches[0]; dL = ev.pageX - disX; oList.style.left = disL+dL+'px'; } function end(ev){ var ev = ev.changedTouches[0]; var scale = Math.round(dL/w); //console.log(scale) oList.style.left = disL+scale*w+'px'; disL = oList.offsetLeft; if(disL ==0){ disL=-w*num; } if(disL ==-w*(len-1)){ disL=-w; } n = Math.abs((disL+w)/w); for(var i=0; i<num;i++){ oA[i].className = ''; } oA[n].className = 'active'; } } </script> </body> </html>