純JS實現左右滑動佈局和滑動
阿新 • • 發佈：2018-12-23
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=keywords content=首頁> <meta name=description content=首頁> <meta name=author content=""> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="format-detection" content="telphone=no" /> <link rel="stylesheet" href="./css/global.css"> <script type="text/javascript"> var deviveWidth = document.documentElement.clientWidth; document.documentElement.style.fontSize = deviveWidth / 7.5 + 'px'; </script> <title>test</title> <style> .slider{ overflow: hidden; flex:1; } .slider-list{ transition:all .6s; } .item{ height: 218px; text-align: center; flex:none; width: 375px; } .item1{ background-color: red; } .item2{ background-color: yellow; } .item3{ background-color: green; } .item4{ background-color: blue; } </style> </head> <body> <div class="slider" id="slider"> <div class="slider-list flex" id="slider-list"> <div class="item item1">滑塊1</div> <div class="item item2">滑塊2</div> <div class="item item3">滑塊3</div> <div class="item item4">滑塊4</div> </div> </div> <script type="text/javascript" charset="utf-8" src="./js/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="./js/fastclick.js"></script> <script type="text/javascript" charset="utf-8" src="./js/global.js"></script> <script type="text/javascript"> document.getElementById('slider').addEventListener('touchstart',touchstart, false); document.getElementById('slider').addEventListener('touchmove',touchmove, false); document.getElementById('slider').addEventListener('touchend',touchend, false); var width = document.documentElement.clientWidth; var startX =0; var index = 0; var translateX = 0; var startTime; var startTranslate; var isSlide = false; var sliderNumber = 4;//滑塊是數量，控制溢位不能滑動 function touchstart(e){ startX = e.touches[0].clientX; startTime = new Date().getTime(); startTranslate = translateX; isSlide = true; } function touchmove(e){ if (!isSlide) return var currentX = e.touches[0].clientX //2端溢位不能滑動 if (startTranslate == 0 && currentX > startX) return; if (Math.abs(startTranslate) == width * (sliderNumber - 1) && currentX < startX) return; // 向右滑動時， 沒資料無法滑動 if (currentX < startX) { } distance = currentX - startX; translateX = currentX - startX + startTranslate; document.getElementById("slider-list").style.transform = "translateX("+translateX+"px)" } function touchend(){ if (!isSlide) return var duration = +new Date() - startTime var newTranslateX if (translateX > startTranslate) { // 向左劃 if (distance > width / 3 || (distance > 40 && duration < 600)) { newTranslateX = startTranslate + width; } else { newTranslateX = startTranslate } } else { // 向右劃 if (Math.abs(distance) > width / 3 || (Math.abs(distance) > 40 && duration < 600)) { newTranslateX = startTranslate - width; } else { newTranslateX = startTranslate } } translateX = newTranslateX; isSlide = false; distance = 0; index = Math.abs(newTranslateX / width) document.getElementById("slider-list").style.transform = "translateX("+translateX+"px)" } </script> </body> </html>