當前位置:吉日网官网 - 紀念幣收藏 - 詳解如何使用原生JS實現移動端web輪播圖效果

詳解如何使用原生JS實現移動端web輪播圖效果

在做移動端開發的時候,必不可少的是輪播圖,下面這篇文章主要給大家介紹了關於利用純JS實現移動端web輪播圖的相關資料,重要的是結合Tween算法造輪子,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考借鑒,下面來壹起看看吧。

前言

相信大家應該都知道,移動端的輪播圖是我們比較常見的需求, 我們最快的實現方式往往是 使用第三方的代碼, 例如 swiper , 但當遇到壹些比較復雜的輪播圖需求時, 往往是束手無策,不知道怎麽改.

所以我們要嘗試去自己造壹些輪子, 以適應各種復雜多變的需求; 另外壹點, 自己寫的代碼如果有bug是很容易修復的, 對自身的提高也很大.

在沒有閱讀swiper源碼的過程下,我嘗試自己實現壹個簡易而不失實用的移動端輪播圖, 經過幾個小時的思考和實踐終於還是實現了(如圖):

實現移動端的輪播圖要比pc復雜壹些,主要表現在以下幾個方面:

1.輪播圖要適應不同寬度/dpr的屏幕

2.需要使用 touch相關的事件

3.不同機型對 touch事件支持的不太壹樣,可能會有壹些兼容性問題

4.手指移動圖片壹部分距離,剩下的距離需要自動完成

5.自動完成距離需要有 ease 時間曲線

但編程解決問題的思路都是差不多的,

我們在使用輪播圖的時候可以仔細觀察,通過現象看到本質:

我們在使用輪播圖的時候可以仔細觀察,通過現象看到本質:

手指放在圖片上, 手指向左或者向右移動, 圖片也隨之移動;

手指移動的距離少時,圖片自動復原位置;手指移動的距離多時,自動切換到下壹張;

手指向左或者向右移動的快時,會切換到下壹張;

圖片輪播是無限循環的, 我們需要采用 3 1 2 3 1的方式來實現, 即 N+2張圖來實現N張圖的無限循環輪播

我們通過分析現象,可以提出壹個基本實現方案:

1. 手指觸摸事件可以通過 touchstart touchmove touchend 3個事件來實現

2.在手指 touchstart的時候我們需要記錄 手指的x坐標, 可以使用 touch的pageX屬性; 還有 這個時間點,

3.手指touchmove的時候我們也需要記錄pageX,並且記錄累計移動的距離 moveX

4.手指離開的時候,記錄時間點, 根據前兩步計算的 x方向移動的距離,時間點之差

5.通過比較x方向移動距離來判斷移動方向, 以及是否應該切換到下壹張圖; 根據時間判斷用戶是否進行了左右掃動的操作

6.移動圖片可以使用 translate3d來實現,開啟硬件加速

7.移動壹段距離需要 easeOut效果,我們可以使用 Tween算法中的easeOut來實現我們每次移動的距離; 當然也可以使用 js設置 transition動畫

實現源碼(僅供參考):

head頭部樣式

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=.5,maximum-scale=.5">

<title>移動端輪播圖</title>

<style>

* {

box-sizing: border-box;

margin: 0;

padding: 0

}

.banner {

overflow: hidden;

width: 100%;

height: 300px

}

.banner .img-wrap {

position: relative;

height: 100%

}

.banner img {

display: block;

position: absolute;

top: 0;

width: 100%;

height: 100%

}

</style>

</head>HTML結構

<p class="banner">

<p class="img-wrap" id="imgWrap">

<img src="images/banner_3.jpg" data-index="-1">

<img src="images/banner_1.jpg" data-index="0">

<img src="images/banner_2.jpg" data-index="1">

<img src="images/banner_3.jpg" data-index="2">

<img src="images/banner_1.jpg" data-index="3">

</p>

</p>JS代碼1, easeOut動畫式移動,

這裏的 HTMLElement.prototype.tweenTranslateXAnimate ,是給所有的HTML元素類擴展的tweenTranslateXAnimate方法

移動壹段距離我們需要使用定時器來幫助我們完成,這個重復的操作

<script>

HTMLElement.prototype.tweenTranslateXAnimate = function (start, end, callback) {

var duration = 50;

var t = 0;

var vv = end - start;

var Tween = {

Quad: {

easeOut: function (t, b, c, d) {

return -c * (t /= d) * (t - 2) + b;

}

}

};

this.timer = setInterval(function () {

var dis = start + Tween.Quad.easeOut(++t, 0, vv, duration);

this.style.transform = 'translate3d(' + dis + 'px, 0, 0)';

if (vv > 0 && parseInt(this.style.transform.slice(12)) >= end) {

this.style.transform = 'translate3d(' + parseInt(dis) + 'px, 0, 0)';

clearInterval(this.timer);

callback && callback();

}

if (vv < 0 && parseInt(this.style.transform.slice(12)) <= end) {

this.style.transform = 'translate3d(' + parseInt(dis) + 'px, 0, 0)';

clearInterval(this.timer);

callback && callback();

}

}.bind(this), 4);

}

</script>touch事件部分

<script>

~function () {

var lastPX = 0; // 上壹次觸摸的位置x坐標, 需要計算出手指每次移動的壹點點距離

var movex = 0; // 記錄手指move的x方向值

var imgWrap = document.getElementById('imgWrap');

var startX = 0; // 開始觸摸時手指所在x坐標

var endX = 0; // 觸摸結束時手指所在的x坐標位置

var imgSize = imgWrap.children.length - 2; // 圖片個數

var t1 = 0; // 記錄開始觸摸的時刻

var t2 = 0; // 記錄結束觸摸的時刻

var width = window.innerWidth; // 當前窗口寬度

var nodeList = document.querySelectorAll('#imgWrap img'); // 所有輪播圖節點數組 NodeList

// 給圖片設置合適的left值, 註意 querySelectorAll返回 NodeList, 具有 forEach方法

nodeList.forEach(function (node, index) {

node.style.left = (index - 1) * width + 'px';

});

/**

* 移動圖片到當前的 tIndex索引所在位置

* @param {number} tIndex 要顯示的圖片的索引

* */

function toIndex(tIndex) {

var dis = -(tIndex * width);

var start = parseInt(imgWrap.style.transform.slice(12));

// 動畫移動

imgWrap.tweenTranslateXAnimate(start, dis, function () {

setTimeout(function () {

movex = dis;

if (tIndex === imgSize) {

imgWrap.style.transform = 'translate3d(0, 0, 0)';

movex = 0;

}

if (tIndex === -1) {

imgWrap.style.transform = 'translate3d(' + width * (1 - imgSize) + 'px, 0, 0)';

movex = -width * (imgSize - 1);

}

}, 0);

});

}

/**

* 處理各種觸摸事件 ,包括 touchstart, touchend, touchmove, touchcancel

* @param {Event} evt 回調函數中系統傳回的 js 事件對象

* */

function touch(evt) {

var touch = evt.targetTouches[0];

var tar = evt.target;

var index = parseInt(tar.getAttribute('data-index'));

if (evt.type === 'touchmove') {

var di = parseInt(touch.pageX - lastPX);

endX = touch.pageX;

movex += di;

imgWrap.style.webkitTransform = 'translate3d(' + movex + 'px, 0, 0)';

lastPX = touch.pageX;

}

if (evt.type === 'touchend') {

var minus = endX - startX;

t2 = new Date().getTime() - t1;

if (Math.abs(minus) > 0) { // 有拖動操作

if (Math.abs(minus) < width * 0.4 && t2 > 500) { // 拖動距離不夠,返回!

toIndex(index);

} else { // 超過壹半,看方向

console.log(minus);

if (Math.abs(minus) < 20) {

console.log('距離很短' + minus);

toIndex(index);

return;

}

if (minus < 0) { // endX < startX,向左滑動,是下壹張

toIndex(index + 1)

} else { // endX > startX ,向右滑動, 是上壹張

toIndex(index - 1)

}

}

} else { //沒有拖動操作

}

}

if (evt.type === 'touchstart') {

lastPX = touch.pageX;

startX = lastPX;

endX = startX;

t1 = new Date().getTime();

}

return false;

}

imgWrap.addEventListener('touchstart', touch, false);

imgWrap.addEventListener('touchmove', touch, false);

imgWrap.addEventListener('touchend', touch, false);

imgWrap.addEventListener('touchcancel', touch, false);

}();

</script>在觸摸事件中最關鍵的參數是 pageX參數, 記錄x的位置.

當然這只是壹個demo,還需要進壹步的優化和封裝, 以便於我們用在真實的項目.

本demo僅僅是提供了壹個解決問題的思路, 有了這個思路,相信各種復雜的需求也得以解決...

  • 上一篇:再見了我的愛怎麽回復
  • 下一篇:請問海南有田黃石嗎?我發現了許多黃色的石頭。不知道是不是田黃。
  • copyright 2024吉日网官网