自动轮播加手势滑动偏移
自动轮播,并添加手势滑动偏移
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; overflow: hidden; } .container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .awrad_outer { width: 300px; overflow: hidden; } .awrad_list { width: 900px; overflow: hidden; } .award_list_item { float: left; background-color: skyblue; width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 20px; font-weight: bold; } </style> </head> <body> <div class="container"> <div class="awrad_outer"> <div class="awrad_list"> <div class="award_list_item">1</div> <div class="award_list_item">2</div> <div class="award_list_item">3</div> <div class="award_list_item">4</div> <div class="award_list_item">5</div> <div class="award_list_item">6</div> <div class="award_list_item">7</div> <div class="award_list_item">8</div> <div class="award_list_item">9</div> </div> </div> </div> </body> <script> var awrad_outer = document.querySelector('.awrad_outer'); var awrad_list = document.querySelector('.awrad_list'); var offsetVal = 0; var downX = null; function move() { if (downX != null) { return; } offsetVal--; if (offsetVal <= -600) { offsetVal = 0; } awrad_list.style.transform = `translateX(${offsetVal}px)`; requestAnimationFrame(move) } move(); awrad_outer.addEventListener('touchstart', function (e) { downX = e.targetTouches[0].clientX; }) awrad_outer.addEventListener('touchmove', function (e) { let clientX = e.targetTouches[0].clientX; offsetVal += clientX - downX; downX = clientX; // 修正参照值 if (offsetVal > 0) { offsetVal = 0; } else if (offsetVal < -600) { offsetVal = -600; } awrad_list.style.transform = `translateX(${offsetVal}px)`; }) awrad_outer.addEventListener('touchend', function (e) { downX = null; move(); }) </script> </html>