<!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>