當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript实现移动端跟手轮播图
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现移动端跟手轮播图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
touch事件
了解觸摸的仨事件：
| touchstart事件 | 當手指觸摸屏幕時候觸發(fā)，即使已經(jīng)有一個手指放在屏幕上也會觸發(fā)。 |
| touchmove | 當手指在屏幕上滑動的時候連續(xù)地觸發(fā)。在這個事件發(fā)生期間，調(diào)用preventDefault()事件可以阻止?jié)L動。 |
| touchend | 當手指從屏幕上離開的時候觸發(fā)。 |
這些事件都會冒泡，也都可以取消。雖然這些觸摸事件沒有在DOM規(guī)范中定義，但是它們卻是以兼容DOM的方式實現(xiàn)的。所以，每個觸摸事件的event對象都提供了在鼠標實踐中常見的屬性：bubbles(起泡事件的類型)、cancelable(是否用 preventDefault() 方法可以取消與事件關聯(lián)的默認動作)、clientX(返回當事件被觸發(fā)時，鼠標指針的水平坐標)、clientY(返回當事件觸發(fā)時，鼠標指針的垂直坐標)、screenX(當某個事件被觸發(fā)時，鼠標指針的水平坐標)和screenY(返回當某個事件被觸發(fā)時，鼠標指針的垂直坐標)。除了常見的DOM屬性，觸摸事件還包含下面三個用于跟蹤觸摸的屬性。
| touches | 表示當前跟蹤的觸摸操作的touch對象的數(shù)組。 |
| targetTouches | 特定于事件目標的Touch對象的數(shù)組。 |
| changeTouches | 表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。 |
當然還有下面這些屬性
clientX：觸摸目標在視口中的x坐標。clientY：觸摸目標在視口中的y坐標。identifier：標識觸摸的唯一ID。pageX：觸摸目標在頁面中的x坐標。pageY：觸摸目標在頁面中的y坐標。screenX：觸摸目標在屏幕中的x坐標。screenY：觸摸目標在屏幕中的y坐標。target：觸目的DOM節(jié)點目標。好了，下面開始移動端的輪播圖了
html
<body> <div class="container"><ul class="list"><li class="item "><img src="images/1.jpg" alt=""></li><li class="item"><img src="images/2.jpg" alt=""></li><li class="item"><img src="images/3.jpg" alt=""></li><li class="item"><img src="images/4.jpg" alt=""></li><li class="item"><img src="images/5.jpg" alt=""></li></ul><ul class="point"> <!-- <li class="point-item active" ></li>--> <!-- <li class="point-item"></li>--> <!-- <li class="point-item"></li>--></ul> </div> </body>css
.container{width: 100%;background-color: gray;position: relative; } .container .list{/*width: 300%;*/overflow: hidden; } .container .list::after{content: "";display: block;clear: both; } .container .list .item{/*width: 375px;*/float: left; } .container .list .item img{width: 100%;height: 188px; }.point{height: 10px;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%); } .point-item{width: 8px;height: 8px;margin: 0 5px;background-color: #FFFFFF;opacity: .2;border-radius: 8px;float: left; } .point-item.active{opacity: 1; }js
var items = document.getElementsByClassName('item'); var list = document.getElementsByClassName('list')[0]; var container = document.getElementsByClassName('container')[0];//小點 var pointWrap = document.getElementsByClassName('point')[0];var points = [];//創(chuàng)建點 var _createPoint = function (i){var pointDom = document.createElement('li');pointDom.classList.add('point-item');//給第一項activeif (i === 0){pointDom.classList.add('active');}points.push(pointDom);pointWrap.appendChild(pointDom); }//移動端屏幕寬度兼容問題 for(var i = 0 ; i < items.length ; i++){items[i].style.width = window.innerWidth + 'px';_createPoint(i); } list.style.width = items.length*window.innerWidth +'px';var state ={beginX :0,//開始x的位置endX:0, //結(jié)束x的位置nowX:0, //當前x的位置index:0, } //跟手函數(shù) var _slice = function (){var deltaX = state.nowX - state.beginX;list.style.marginLeft = -(window.innerWidth * state.index) + deltaX + 'px'; }var _reset = function (){//需要一個過度使得復位更加自然list.style.transition = "all .3s";//現(xiàn)在在第幾張，就要復位到那一張list.style.marginLeft = (-state.index * window.innerWidth) + 'px'; } var _goPrev = function (){if(state.index > 0){state.index --;list.style.transition = "all .3s";list.style.marginLeft = -state.index * window.innerWidth +'px';_setIndex();}else{//復位_reset();} }var _goNext = function (){if(state.index < items.length -1){state.index ++;list.style.transition = "all .3s";list.style.marginLeft = -state.index * window.innerWidth +'px';_setIndex();}else{//復位_reset();} }var _judgeMove = function (){var deltaX = state.endX - state.beginX;if(deltaX >= window.innerWidth *2/5){//上一張// console.log('上一張');_goPrev();}else if(deltaX <= -window.innerWidth *2/5){//下一張// console.log('下一張');_goNext();}else{//不動console.log('不動');_reset();} }//touchstart 觸摸開始container.addEventListener('touchstart',function (e){//去除過渡，獲得良好的反饋list.style.transition = 'none';state.beginX = e.targetTouches[0].clientX;// console.log(e.targetTouches); });//touchmove 觸摸移動 container.addEventListener('touchmove',function (e){// console.log(e.changedTouches);state.nowX = e.changedTouches[0].clientX;// state.nowX = nowX; //記錄nowX_slice(); });//touchend 觸摸取消 container.addEventListener('touchend',function (e) {state.endX = e.changedTouches[0].clientX;_judgeMove(); });//根據(jù)index來切換active類名 var _setIndex = function (){var index = state.index;for(var i = 0 ; i < points.length ; i++){points[i].classList.remove('active');}points[index].classList.add('active'); }【注】
1、我html引用了reset.css重置樣式
詳情可移至https://blog.csdn.net/weixin_45825426/article/details/112795171
2、如果在做的時候出現(xiàn)了頁面整體樣式并不好看，寬度并不是自己想要的，比例出了問題，出現(xiàn)下圖效果：
那是因為我們大部分移動設備默認的viewport都是980px，所以要添加以下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">效果圖
總結(jié)
以上是生活随笔為你收集整理的JavaScript实现移动端跟手轮播图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 12-Factor App简介
- 下一篇： ubuntu下的3D桌面.compiz