一、觸屏事件
在制作移動端網(wǎng)頁輪播圖之前，我們先補充一些移動端的基本觸屏事件及事件對象！
1.觸屏事件概述
移動端瀏覽器兼容性比較好，所以我們不需要考慮以前 JS 的兼容性問題，可以放心地使用原生 JS 書寫效果，但是移動端也有自己獨特的地方。比如觸屏事件，Android 和 IOS 都有。
<div></div>
<script>
var div = document.querySelector('div');
div.addEventListener('touchstart', function() {
console.log('yes');
})
</script>
這里PC端變移動端按下F12鍵，如圖點擊左邊第二個即可！
2.觸屏事件對象
上面的 touchstart、touchmove、touchend 三個事件都會有各自的事件對象。
① 如果觸摸的是同一個元素，那么前兩個相同，返回的都是正在觸摸該元素的手指數(shù)；
② 手指離開的時候，前兩個都沒有了，只有 changedTouches；
③ 最常用的是第二個 targetTouches，重點記?。?br> ④ 可以比作一個數(shù)組，通過索引號獲得相應(yīng)的手指信息
3. 拖動元素
拖動元素三部曲：
（1）觸摸元素 touchstart：獲取手指初始坐標(biāo)，同時獲得盒子初始位置；
（2）移動手指 touchmove：計算手指的滑動距離，并且移動盒子；
（3）離開手指 touchend。注意手指移動也會觸發(fā)屏幕滾動，所以這里要阻止默認(rèn)的屏幕滾動 e.preventDefault()。
① touchstart、touchmove、touchend 可以實現(xiàn)拖動元素；
② 但是拖動元素需要得到當(dāng)前手指的坐標(biāo)值，我們可以使用 targetTouches[0] 里面的 pageX 和 pageY；
③ 拖動原理，手指移動中，計算出手指移動的距離，然后用盒子原來的 left 加上手指移動的距離就是現(xiàn)在的 left；
④ 手指移動的距離等于手指滑動后的 left 減去手指剛開始觸摸屏幕時的 left。
<!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>
div {
position: absolute;
left: 0;
top: 100px;
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
var startX = 0;
var startY = 0;
var endX = 0;
var endY = 0;
var x = 0;
var y = 0;
div.addEventListener('touchstart', function(e) {
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
x = this.offsetLeft;
y = this.offsetTop;
})
div.addEventListener('touchmove', function(e) {
var newLeft = x + e.targetTouches[0].pageX - startX;
var newTop = y + e.targetTouches[0].pageY - startY;
this.style.left = newLeft + 'px';
this.style.top = newTop + 'px';
e.preventDefault();
})
</script>
</body>
</html>
注意手指移動也會觸發(fā)屏幕滾動，為阻止默認(rèn)滾動，我們這里添加 e.preventDefault()，只讓 div 移動！
二、移動端輪播圖
1.案例分析
（1）自動播放
① 由于移動端兼容性較好，所以移動端想要實現(xiàn)輪播圖的自動播放非常簡單；
② 核心原理，使用 CSS 里面的 transform 和transition 屬性，實現(xiàn)圖片的滾動和過渡效果。
（2）無縫滾動
① 無縫滾動，需判斷圖片是否滾動到了最后一張或者是第一張，用索引號 index 去判斷；
② 我們的判斷條件是要等到圖片滾動完畢后再去判斷，此時需要添加過渡完成事件 transitionend；
③ 若滾動到最后一張，就將索引號設(shè)置為0；
④ 注意這里的索引號設(shè)置為0，但是圖片此時還沒有移動，在下一步圖片需要立馬跳到索引為0的位置，不能被看出來，所以這里不要添加過渡動畫，然后移動；
⑤ 同樣道理，如果索引號小于0，說明是倒著走的，也是不添加過渡地移動。
（3）小圓點跟隨
① 在做小圓圈跟隨圖片滾動的特效前，我們先了解一下 classList 屬性，返回元素的類名，該屬性可以給元素添加、移除或切換類，有以下方法：
添加類，element.classList.add(‘類名’);
移除類，element.classList.remove(‘類名’);
切換類，element.classList.toggle(‘類名’)；
添加類名是在后面追加類名，所以不會覆蓋掉以前的類名，注意類名前面不需要加點！
② 把帶有 current 類名的 li 選出來，去掉它的類名，remove；
③ 讓當(dāng)前索引號的 li 加上類名 current，add；
④ 小圓點跟隨變化也是等到過渡結(jié)束之后變化的，所以這個部分也要寫到 transitionend 事件里面。
（4）手指滑動
① 本質(zhì)就是 ul 跟隨手指移動，簡單來說就是移動端拖動元素；
② 觸摸元素 touchstart，此時獲取手指初始坐標(biāo)；
③ 手指移動 touchmove，計算手指的滑動距離，并且移動盒子；
④ 手指離開 touchend，根據(jù)不同的滑動距離分不同的情況實現(xiàn)回彈效果；
⑤ 手指觸摸的時候就停止定時器；
⑥ 手指拖動的時候不需要動畫效果，所以取消過渡；
⑦ 回彈效果，如果移動距離小于某個像素就回彈到原來的位置，大于某個像素就切換到下一張或上一張；
⑧ 向左滑動 moveX 就是負(fù)的，向右滑動 moveX 就是正的，而我們這里要的移動距離必須是正的，所以加絕對值，Math.abs(moveX)；
⑨ 當(dāng)移動距離滿足該像素時，向左滑動 index++，向右滑動 index–；
⑩ 手指離開屏幕時，恢復(fù)定時器，先把原來的定時器全部清除，再開設(shè)新的定時器，繼續(xù)第一步的自動播放。
2.代碼實現(xiàn)
① 網(wǎng)頁輪播圖.html
<!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>
<link href="網(wǎng)頁輪播圖.css" rel="stylesheet"/>
<script src="網(wǎng)頁輪播圖.js"></script>
</head>
<body>
<div class="focus">
<ul class="picture">
<li><a><img src="picture//圖5.jpg"/></a></li>
<li><a><img src="picture//圖1.jpg"/></a></li>
<li><a><img src="picture//圖2.jpg"/></a></li>
<li><a><img src="picture//圖3.jpg"/></a></li>
<li><a><img src="picture//圖4.jpg"/></a></li>
<li><a><img src="picture//圖5.jpg"/></a></li>
<li><a><img src="picture//圖1.jpg"/></a></li>
</ul>
<ol class="circle">
<li></li>
<li></li>
<li></li>
<li></li>
<li class="current"></li>
</ol>
</div>
</body>
</html>
② 網(wǎng)頁輪播圖.css
* {
margin: 0;
padding: 0;
}
.focus {
position: relative;
width: 400px;
height: 150px;
margin: 50px auto;
overflow: hidden;
}
.picture {
position: absolute;
top: 0;
left: -400px;
width: 700%;
}
.picture li {
float: left;
list-style: none;
}
.picture img {
width: 400px;
height: 150px;
}
.circle {
position: absolute;
width: 100px;
height: 7px;
right: 8px;
bottom: 7px;
list-style-type: none;
}
.circle li {
float: right;
width: 8px;
height: 7px;
margin: 0 3px;
background-color: aliceblue;
border-radius: 30%;
transition: all .1s;
cursor: pointer;
}
.circle .current {
width: 12px;
background-color: rgb(16, 136, 242);
}
③ 網(wǎng)頁輪播圖.js文章來源：http://www.zghlxwxcb.cn/news/detail-402519.html
window.addEventListener('load', function() {
var focus = document.querySelector('.focus');
var ul = focus.children[0];
var ol = focus.children[1];
var w = focus.offsetWidth;
var index = 0;
//1.輪播圖自動播放
var timer = this.setInterval(function() {
index++;
var target = -index * w;
//使用CSS里的transform和transition屬性實現(xiàn)圖片滾動和過渡
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX('+ target +'px)';
}, 2000);
//2.無縫滾動，且去掉過渡效果
ul.addEventListener('transitionend', function() {
if (index >= ul.children.length - 2) {
index = 0;
ul.style.transition = 'none';
var target = -index * w;
ul.style.transform = 'translateX('+ target +'px)';
} else if(index < 0) {
index = ul.children.length - 3;
ul.style.transition = 'none';
var target = -index * w;
ul.style.transform = 'translateX('+ target +'px)';
}
//3.小圓點跟隨圖片變化
ol.querySelector('.current').classList.remove('current');
var num = ol.children.length - index - 1;
ol.children[num].classList.add('current');
})
//4.手指滑動輪播圖
var startX = 0;
var moveX = 0;
var flag = false;
ul.addEventListener('touchstart', function(e) {
startX = e.targetTouches[0].pageX;
//手指觸摸的時候就停止定時器
clearInterval(timer);
})
ul.addEventListener('touchmove', function(e) {
moveX = e.targetTouches[0].pageX - startX;
var target = -index * w + moveX;
//手指拖動的時候不需要動畫效果，所以取消過渡效果
ul.style.transition = 'none';
ul.style.transform = 'translateX('+ target +'px)';
flag = true;
e.preventDefault();
})
ul.addEventListener('touchend', function() {
//5.回彈效果，滑動距離大于70px才會切換下一張
if (flag) {
if (Math.abs(moveX) > 70) {
if (moveX > 0) {
index--;
} else {
index++;
}
var target = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX('+ target +'px)';
} else {
var target = -index * w;
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX('+ target +'px)';
}
}
//6.手指離開，恢復(fù)定時器
clearInterval(timer);
timer = setInterval(function() {
index++;
var target = -index * w;
//使用CSS里的transform和transition屬性實現(xiàn)圖片滾動和過渡
ul.style.transition = 'all .3s';
ul.style.transform = 'translateX('+ target +'px)';
}, 2000);
})
})
3.運行結(jié)果
F12鍵切換到移動端哦！文章來源地址http://www.zghlxwxcb.cn/news/detail-402519.html
到了這里，關(guān)于移動端網(wǎng)頁輪播圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
