首页 > 代码库 > 移动端轮播图
移动端轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/> <style> *{margin:0;padding:0;} html,body{height: 100%;} .box{ height: 100%; background: #76c6c8; } .img{ position: absolute; top: 0; right:0; bottom:0; left: 0; margin: auto; height: auto; transition: all 1s ease; } .page{ position: absolute; width: 20%; bottom: 35%; height: auto; left: 50%; margin: auto; /*background: #abef98;*/ } .page>ul{ margin-left: -50%; background: #ffffff; overflow: hidden; opacity: 0.5; text-align: center; } .page > ul > li{ margin: auto; float: left; list-style: none; width: 33.33%; border: solid 1px #000000; box-sizing: border-box; opacity: 1; } </style> </head> <body> <div class="box"> <span class="guide"></span> <img class="img" src="img/img1.jpg" width="100%" alt=""/> <div class="page"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> </body> <script> var box = document.getElementsByClassName(‘box‘)[0]; var img = document.getElementsByClassName(‘img‘)[0]; var guide = document.getElementsByClassName(‘guide‘)[0]; var page = document.getElementsByClassName(‘page‘)[0]; document.body.addEventListener(‘touchstart‘,function(e){ event.preventDefault(); return false; }); document.body.addEventListener(‘touchend‘,function(e){ event.preventDefault(); return false; }); var startX,startY,endX,endY; box.addEventListener(‘touchstart‘,function(e){ e.preventDefault(); startX = e.touches[0].clientX; startY = e.touches[0].clientY; }); box.children[2].children[0].children[0].style.background = ‘#f00‘; box.addEventListener(‘touchend‘,function(e) { e.preventDefault(); var x, y; endX = e.changedTouches[0].clientX; endY = e.changedTouches[0].clientY; x = endX - startX; y = endY - startY; var num = box.children[1].src.split(‘img/img‘)[1][0]; function pageN(x){ var pageNum = x.children[0].innerText; for(i in pageNum){ if(num == pageNum[i]){ box.children[2].children[0].children[i].style.background = ‘#f00‘; }else{ box.children[2].children[0].children[i].style.background = ‘#fff‘; } } } if(x>y && x>-y){ num--; if(num < 1){ num = 3; img.src = ‘img/img‘ +num+ ‘.jpg‘; }else{ img.src = ‘img/img‘ +num+ ‘.jpg‘; } pageN(page); guide.innerText = ‘向右‘; }else if(x<y && x<-y){ num++; if(num > 3){ num = 1; img.src = ‘img/img‘ +num+ ‘.jpg‘; }else if(num < 1){ num = 3; img.src = ‘img/img‘ + num + ‘.jpg‘; } else{ img.src = ‘img/img‘ + num + ‘.jpg‘; } pageN(page); guide.innerText = ‘向左‘; }else if(x>y && x<-y){ guide.innerText = ‘向上‘; }else if(x<y && x>-y){ guide.innerText = ‘向下‘; } }); </script> </html>
移动端轮播图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。