這篇文章帶給大家的內容是介紹js實作行動端Touch輪播圖的方法,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
touch
輪播圖其實就是透過手指的滑動,來左右切換輪播圖,下面我們透過一個案例,來實現。
結構上,還是用ul
、li
來存放輪播圖片,ol
、li
來存放輪播小圓點:
html
的一些標籤,都會有一些預設樣式,例如body
標籤預設是有一個邊距的,為了不影響美觀,我們需要清除掉。
/* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的“小圆点” */ ul,li,ol { list-style-type: none; } /* 图片自适应 */ img { width: 100%; height: auto; border: none; /* ie8 */ display: block; -ms-interpolation-mode: bicubic; /*为了照顾ie图片缩放失真*/ }
前面講特效的時候,我們說過如何使用原生js
實作移一個輪播圖的概念,但當時的方式是透過li
浮動,這裡要介紹一個新的方-定位給大家。
想法:
給予ul
外層的盒子一個相對定位;
#這裡的ul
高度不能寫死,它應該是li
撐開的高度,但是由於li
絕對定位,沒辦法撐開這個高度,所以這裡的ul
需要在js
裡面動態設定高度;
給li
設定相對定位,且left
、top
都為0
,再給li
新增一個transform:translateX(300%)
屬性,目的是初始化顯示的圖片為空,然後在js
裡面只需要動態設定每個li
的translateX
值,即可實現輪播;
設定小圓點區域,因為小圓點個數未知,所以ol
的寬度也未知,想要讓一個未知寬度的盒子水平居中,可以使用absolute
定位結合left
百分比的方式實現;
給ol
下面的li
設定一個寬高添加圓角邊框屬性,並且左浮動,這樣就能顯示一排空心的小圓點了;
最後,添加一個樣式類,裡面設定一個背景屬性,用來顯示目前展示圖片對應的小圓點。
/* 轮播图最外层盒子 */ .carousel { position: relative; overflow: hidden; } .carousel ul { /* 这个高度需要在JS里面动态添加 */ } .carousel ul li { position: absolute; width: 100%; left: 0; top: 0; /* 使用 transform:translaX(300%) 暂时将 li 移动到屏幕外面去*/ -webkit-transform: translateX(300%); transform: translateX(300%); } /* 小圆点盒子 */ .carousel .points { /* 未知宽度的盒子,使用 absolute 定位,结合 transform 的方式进行居中 */ position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); } /* 小圆点 */ .carousel .points li { width: 5px; height: 5px; border-radius: 50%; border: 1px solid #fff; float: left; margin: 0 2px; } /* 选中小圆点的样式类 */ .carousel .points li.active { background-color: #fff; }
先不考慮別的,js
在初始化的時候,首先要做的就是為ul
加上上一個高度,不然圖片是不顯示的。
給UL
動態設定高度
#動態產生小圓點(根據圖片的張數建立小圓點個數,i=0
新增active
)
#初始化三個li
的基本位置
定義三個變量,分別用來儲存三個li
的下(left
儲存最後一張圖片的下標,center
和right
分別儲存第一張和第二張的下標)
#透過陣列[下標]
的方式給三個li
設定定位後left
方向的位置
var carousel = document.querySelector('.carousel'); var carouselUl = carousel.querySelector('ul'); var carouselLis = carouselUl.querySelectorAll('li'); var points = carousel.querySelector('ol'); // 屏幕的宽度(轮播图显示区域的宽度) var screenWidth = document.documentElement.offsetWidth; // 1- ul设置高度 carouselUl.style.height = carouselLis[0].offsetHeight + 'px'; // 2- 生成小圆点 for(var i = 0; i <p style="text-align: center;"><img src="https://img.php.cn//upload/image/588/479/428/js%E5%A6%82%E4%BD%95%E5%AF%A6%E4%BD%9C%E8%A1%8C%E5%8B%95%E7%AB%AFTouch%E8%BC%AA%E6%92%AD%E5%9C%96%EF%BC%9F%20%EF%BC%88%E7%A8%8B%E5%BC%8F%E7%A2%BC%E7%AF%84%E4%BE%8B%EF%BC%89" title="js如何實作行動端Touch輪播圖? (程式碼範例)" alt="js如何實作行動端Touch輪播圖? (程式碼範例)" style="max-width:90%" style="max-width:90%"></p><p> <strong>效果圖:</strong></p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/609/739/253/js%E5%A6%82%E4%BD%95%E5%AF%A6%E4%BD%9C%E8%A1%8C%E5%8B%95%E7%AB%AFTouch%E8%BC%AA%E6%92%AD%E5%9C%96%EF%BC%9F%20%EF%BC%88%E7%A8%8B%E5%BC%8F%E7%A2%BC%E7%AF%84%E4%BE%8B%EF%BC%89" title="js如何實作行動端Touch輪播圖? (程式碼範例)" alt="js如何實作行動端Touch輪播圖? (程式碼範例)" style="max-width:90%" style="max-width:90%"></p><h3>5. 新增定時器,讓圖片動起來</h3><blockquote>輪播圖都會自己輪播,所以需要用到定時器,每隔一段時間執行一次輪轉函數。 </blockquote>
新增定時器,定時器裡面輪轉下標
#極值判斷
var timer = null; // 调用定时器 timer = setInterval(showNext, 2000); // 轮播图片切换 function showNext(){ // 轮转下标 left = center; center = right; right++; // 极值判断 if(right > carouselLis.length - 1){ right = 0; } //添加过渡 carouselLis[left].style.transition = 'transform 1s'; carouselLis[center].style.transition = 'transform 1s'; // 右边的图片永远是替补的,不能添加过渡 carouselLis[right].style.transition = 'none'; // 归位 carouselLis[left].style.transform = 'translateX('+ (-screenWidth) +'px)'; carouselLis[center].style.transform = 'translateX(0px)'; carouselLis[right].style.transform = 'translateX('+ screenWidth +'px)'; // 自动设置小圆点 setPoint(); } // 动态设置小圆点的active类 var pointsLis = points.querySelectorAll('li'); function setPoint(){ for(var i = 0; i <p style="text-align: center;"><img src="https://img.php.cn//upload/image/903/520/594/js%E5%A6%82%E4%BD%95%E5%AF%A6%E4%BD%9C%E8%A1%8C%E5%8B%95%E7%AB%AFTouch%E8%BC%AA%E6%92%AD%E5%9C%96%EF%BC%9F%20%EF%BC%88%E7%A8%8B%E5%BC%8F%E7%A2%BC%E7%AF%84%E4%BE%8B%EF%BC%89" title="js如何實作行動端Touch輪播圖? (程式碼範例)" alt="js如何實作行動端Touch輪播圖? (程式碼範例)" style="max-width:90%" style="max-width:90%"></p><p>效果圖:<strong></strong></p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/742/369/156/js%E5%A6%82%E4%BD%95%E5%AF%A6%E4%BD%9C%E8%A1%8C%E5%8B%95%E7%AB%AFTouch%E8%BC%AA%E6%92%AD%E5%9C%96%EF%BC%9F%20%EF%BC%88%E7%A8%8B%E5%BC%8F%E7%A2%BC%E7%AF%84%E4%BE%8B%EF%BC%89" title="js如何實作行動端Touch輪播圖? (程式碼範例)" alt="js如何實作行動端Touch輪播圖? (程式碼範例)" style="max-width:90%" style="max-width:90%"></p><h3>6. touch 滑动</h3><blockquote>移动端的轮播图,配合<code>touch</code>滑动事件,效果更加友好。</blockquote>
分别绑定三个touch
事件
touchstart
里面记录手指的位置,清除定时器,记录时间
touchmove
里面获取差值,同时清除过渡,累加上差值的值
touchend
里面判断是否滑动成功,滑动的依据是滑动的距离(绝对值)
超过屏幕的三分之一或者滑动的时间小于300
毫秒同时距离大于30
(防止点击就跑)的时候都认为是滑动成功
在滑动成功的条件分支里面在判断滑动的方向,根据方向选择调用上一张还是下一张的逻辑
在滑动失败的条件分支里面添加上过渡,重新进行归位
重启定时器
var carousel = document.querySelector('.carousel'); var carouselUl = carousel.querySelector('ul'); var carouselLis = carouselUl.querySelectorAll('li'); var points = carousel.querySelector('ol'); // 屏幕的宽度 var screenWidth = document.documentElement.offsetWidth; var timer = null; // 设置 ul 的高度 carouselUl.style.height = carouselLis[0].offsetHeight + 'px'; // 动态生成小圆点 for (var i = 0; i carouselLis.length - 1) { right = 0; } //添加过渡(多次使用,封装成函数) setTransition(1, 1, 0); // 归位 setTransform(); // 自动设置小圆点 setPoint(); } // 轮播图片切换上一张 function showPrev() { // 轮转下标 right = center; center = left; left--; // 极值判断 if (left screenWidth / 3 || (dTime 30)) { // 滑动成功了 // 判断用户是往哪个方向滑 if (dx > 0) { // 往右滑 看到上一张 showPrev(); } else { // 往左滑 看到下一张 showNext(); } } else { // 添加上过渡 setTransition(1, 1, 1); // 滑动失败了 setTransform(); } // 重新启动定时器 clearInterval(timer); // 调用定时器 timer = setInterval(showNext, 2000); } // 设置过渡 function setTransition(a, b, c) { if (a) { carouselLis[left].style.transition = 'transform 1s'; } else { carouselLis[left].style.transition = 'none'; } if (b) { carouselLis[center].style.transition = 'transform 1s'; } else { carouselLis[center].style.transition = 'none'; } if (c) { carouselLis[right].style.transition = 'transform 1s'; } else { carouselLis[right].style.transition = 'none'; } } // 封装归位 function setTransform(dx) { dx = dx || 0; carouselLis[left].style.transform = 'translateX(' + (-screenWidth + dx) + 'px)'; carouselLis[center].style.transform = 'translateX(' + dx + 'px)'; carouselLis[right].style.transform = 'translateX(' + (screenWidth + dx) + 'px)'; } // 动态设置小圆点的active类 var pointsLis = points.querySelectorAll('li'); function setPoint() { for (var i = 0; i <p style="text-align: center;"><img src="https://img.php.cn//upload/image/632/309/128/js%E5%A6%82%E4%BD%95%E5%AF%A6%E4%BD%9C%E8%A1%8C%E5%8B%95%E7%AB%AFTouch%E8%BC%AA%E6%92%AD%E5%9C%96%EF%BC%9F%20%EF%BC%88%E7%A8%8B%E5%BC%8F%E7%A2%BC%E7%AF%84%E4%BE%8B%EF%BC%89" title="js如何實作行動端Touch輪播圖? (程式碼範例)" alt="js如何實作行動端Touch輪播圖? (程式碼範例)" style="max-width:90%" style="max-width:90%"></p><p><strong>效果图:</strong></p><p style="text-align: center;"><img src="https://img.php.cn//upload/image/837/946/969/js%E5%A6%82%E4%BD%95%E5%AF%A6%E4%BD%9C%E8%A1%8C%E5%8B%95%E7%AB%AFTouch%E8%BC%AA%E6%92%AD%E5%9C%96%EF%BC%9F%20%EF%BC%88%E7%A8%8B%E5%BC%8F%E7%A2%BC%E7%AF%84%E4%BE%8B%EF%BC%89" title="js如何實作行動端Touch輪播圖? (程式碼範例)" alt="js如何實作行動端Touch輪播圖? (程式碼範例)" style="max-width:90%" style="max-width:90%"></p><p>以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!</p>
以上是js如何實作行動端Touch輪播圖? (程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!