JavaScript實現移動端輪播效果
更新時間：2017年06月06日 09:27:16 作者：叫我小紅依吧
這篇文章主要為大家詳細介紹了JavaScript實現移動端輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
這個輪播代碼不是我自己所寫，是偶然游覽一個簡友的主頁看到的，今天剛看了事件，決定來逐行分析一下這個代碼。首先，移動端與電腦端不同的是移動端只能通過觸摸和手勢來發(fā)生行為，所以我們要用到js中的與觸摸操作有關的新事件。其實我們輪播的原理和以前相同，都是通過改變元素的位置來控制圖片的出現，但讓我們不是很上手的，是那些用于跟蹤觸摸的屬性。
下面，我簡單介紹一下與觸摸相關的知識
觸摸事件
- touchstart：當手指觸摸屏幕時觸發(fā)，一只手指放在屏幕上也會觸發(fā)
- touchmove：當手指在屏幕上滑動時連續(xù)觸發(fā)。在這個事件發(fā)生期間可以用preventDefault()可以阻止?jié)L動。
- touchend：手指從屏幕移開時觸發(fā)。
- touchcancel：當系統停止跟蹤觸發(fā)時觸發(fā)。
上面這幾個事件都會冒泡，也都可以取消。
屬性
- touches:表示當前跟蹤的觸摸操作的Touch對象的數組
- targetTouches:特定于事件目標的Touch對象的數組。（簡單點可以理解為手指觸摸屏幕的位置）
- changeTouches表示自上次觸摸以來發(fā)生了什么改變的touch對象的數組。（手指離開的位置）
每個touch對象包括下列屬性
- clientX:觸摸目標在視口中的x坐標
- clientY:觸摸目標在視口中的y坐標
- identifier:標識觸摸的唯一ID
- pageX:觸摸目標在頁面中的x坐標
- pageY:觸摸目標在頁面中的y坐標
- screenX:觸摸目標在頁面中的x坐標
- screenY:觸摸目標在頁面中的y坐標
- target:觸摸的dom節(jié)點目標
代碼如下
<!DOCTYPE html>
<html>
<head>
<title>移動端輪播</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
width: 980px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#box ul {
width: 4900px;
height: 100px;
position: relative;
transform: translateX(-980px);
}
#box ul li{
width: 980px;
height: 100px;
float: left;
list-style-type: none;
text-align: center;
color: #fff;
line-height: 100px;
font-size: 30px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById('box');
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.children;//這樣就可以把所有l(wèi)i標簽獲取到了
var iNow = 1;
var x = -iNow*aLi[0].offsetWidth;//li標簽的位置
var bReady = true;
oUl.addEventListener('touchstart',function(ev){
//當手指觸摸屏幕的時候觸發(fā)事件，讓li的位置隨手指滑動而改變
if(bReady == false){return;}
bReady = false;
var downX = ev.targetTouches[0].pageX; //記錄觸摸位置
var disX = downX - x;//下一個li要移動到的位置
function fnMove(ev) {
x = downX-disX;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
}
function fnEnd(ev){
var upX = ev.changedTouches[0].pageX;//離開的位置
if(Math.abs(upX - downX)>50){
//左邊移動
if(upX - downX<0){
iNow++;
if(iNow==aLi.length){iNow=aLi.length-1;}
}else{
//右邊移動
iNow--;
if(iNow==-1){iNow=0;}
}
}
x = -iNow*aLi[0].offsetWidth;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
oUl.style.transition = '200ms all ease';
function tEnd(){
if(iNow==4){
iNow=1;
}
if(iNow==0){iNow=3;}
oUl.style.transition = 'none'
x = -iNow*aLi[0].offsetWidth;
oUl.style.transform = 'translate3d('+x+'px,0,0)';
bReady = true;
}
oUl.addEventListener('transitionend',tEnd,false);
//釋放內存
document.removeEventListener('touchend',fnEnd,false);
document.removeEventListener('touchmove',fnMove,false);
}
document.addEventListener('touchmove',fnMove,false);
document.addEventListener('touchend',fnEnd,false);
//阻止默認事件
ev.preventDefault();
},false);
}
</script>
</head>
<body>
<div id="box">
<ul>
<li style="background:green">3</li>
<li style="background:orange">1</li>
<li style="background:yellow">2</li>
<li style="background:green">3</li>
<li style="background:orange">1</li>
</ul>
</div>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JavaScript文件是一個文本類型的文件,在任何文本編輯器中都可以被打開和編輯,JavaScript文件的擴展名為js,這篇文章主要給大家介紹了關于js文件中引入另一個js文件的4種方法總結,需要的朋友可以參考下2023-12-12
本文主要介紹了Webpack中的文件指紋的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
這篇文章主要為大家詳細介紹了javascript實現簡易的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這是一段調用圖片流動的代碼？為什么我在首頁同時復制出二段代碼后圖片不能流動顯示了？遇此問題很是疑惑，于是搜集整理一些實用技巧以解大伙們的燃眉之急，需要了解的朋友可以參考下2012-12-12
這篇文章主要為大家詳細介紹了js Dom實現換膚效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
本文給大家分享的事tab切換的兩段js，均可實現標簽切換功能，大家根據自己的需求自由選擇2016-05-05
下面小編就為大家?guī)硪黄狫S獲取字符串實際長度(包含漢字)的簡單方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JavaScript實現單例模式實例以及代碼講解，有需要的讀者們跟著學習參考下吧。2017-12-12
這篇文章主要介紹了移動前端開發(fā)之viewport的相關知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
為什么用表單的方式就可以傳遞中文，而URL的方式就不行了呢？非得用URL傳值的方式才能解決問題嗎？這里我想到了動態(tài)表單，何不用它來解決呢2013-04-04