一、功能需求
1、自動播放
2、滑動切換
3、點擊切換
二、思路分析
html代碼：
<div class="container">
<ul class="list clearfix">
<li class="item fl item5">圖5</li>
<li class="item fl item1">圖1</li>
<li class="item fl">圖2</li>
<li class="item fl">圖3</li>
<li class="item fl">圖4</li>
<li class="item fl item5">圖5</li>
<li class="item fl item1">圖1</li>
</ul>
<ul class="list-btn clearfix">
<li class="btn choosed"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
<li class="btn"></li>
</ul>
</div>
css代碼：
/* 輪播圖樣式 */
.container{
width: 100%;
height: 6rem;
overflow: hidden;
position: relative;
}
.list{
height: 100%;
position: absolute;
width: 100rem;
background-color: pink;
transform: translateX(-10rem);
}
.item{
height: 100%;
width: 10rem;
text-align: center;
line-height: 3rem;
font-size: 2rem;
border: 1px solid #fff;
}
.item1{
background-color: yellowgreen;
}
.item5{
background-color: skyblue;
}
/* 按鈕 */
.list-btn{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1rem;
}
.btn{
float: left;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
margin-right: 10px;
background-color: #fff;
}
.choosed{
background-color: blue;
}
?
總體思路：圖片列表放在ul中，通過設置ul列表的位移來實現圖片的切換
1、定時器實現自動播放
用索引值index來定位ul列表的translateX屬性值，用定時器來控制index的增加。再根據index 的大小以及圖片的寬度來計算ul列表的位移。為了解決首末圖片閃動的問題，在首尾多加一張圖片。詳細請看html代碼部分
2、滑動切換
利用touch事件，記錄滑動距離，再根據滑動距離進行判斷，當超過某個值的時候，實現圖片的切換，低于該值的時候，則圖片停留在原位置
3、點擊按鈕切換
點擊選中按鈕，展示對應圖片。同時給相應的按鈕添加被選中的背景色
?
三、重點來了
js代碼，注釋很清楚，有不明白 的可留言
?
//實現功能：
//1、自動播放
//2、滑動切換
//3、點擊切換
window.onload = function() {
//滑動圖片，列表移動
var list = document.querySelector('.list');
//記錄當前展示圖片的索引值
var index = 1;
//1、自動播放
var timer; //定義定時器
autoSlide();
//2、滑動切換
//定義變量記錄滑動起始坐標，滑動距離，滑動結束坐標
var startX = 0,
moveX = 0,
distacenX = 0,
srem = document.querySelector('html').style.fontSize;
list.addEventListener('touchstart', function(e) {
//滑動的時候清除定時器，清除漸變屬性
clearInterval(timer);
removeTransition(list);
startX = e.touches[0].clientX;
});
list.addEventListener('touchmove', function(e) {
moveX = e.touches[0].clientX;
distanceX = moveX - startX;
distanceX = distanceX / parseInt(srem);
?
//根據滑動距離改變圖片列表的位移
slideX(list, index * 10 - distanceX);
})
list.addEventListener('touchend', function(e) {
if (Math.abs(distanceX) >= 5 && distanceX < 0) {
index++;
}
if (Math.abs(distanceX) >= 5 && distanceX > 0) {
index--;
}
addTransition(list);
slideX(list, index * 10);
//滑動結束，判斷是否到最后一張，或者是第一張
if (index == 6) {
index = 1;
setTimeout(function() {
removeTransition(list);
slideX(list, index * 10);
}, 500)
}
if (index == 0) {
setTimeout(function() {
index = 5;
removeTransition(list);
slideX(list, index * 10);
}, 500)
}
addBgc();
//滑動結束， 添加定時器
autoSlide();
})
//3、點擊切換
var btns = document.querySelectorAll('.btn');
btns.forEach(function(v, i) {
v.addEventListener('click', function(e) {
//給被點擊的按鈕加個背景色
//清除定時器
clearInterval(timer);
removeTransition(list);
index = i + 1;
slideX(list, index * 10);
//給按鈕添加背景色
addBgc();
//恢復定時器
autoSlide();
})
})
?
//工具函數
//實現位移
function slideX(v, x) {
v.style.transform = 'translateX(-' + x + 'rem)';
v.style.webkitTransform = 'translateX(-' + x + 'rem)';
}
//添加漸變屬性
function addTransition(v) {
v.style.transition = "all 0.5s";
v.style.webkitTransition = "all 0.5s";
}
//移除漸變屬性
function removeTransition(v) {
v.style.transition = 'none';
v.style.webkitTransition = 'none';
}
//給按鈕添加背景
function addBgc() {
btns.forEach(function(v, i) {
v.className = 'btn';
if (i + 1 == index) {
v.className = 'btn choosed';
}
})
}
//設置定時器，讓圖片輪播
function autoSlide() {
timer = setInterval(function() {
index++;
addTransition(list);
slideX(list, index * 10);
//給按鈕添加背景色
if (index == 6) {
index = 1;
setTimeout(function() {
removeTransition(list);
slideX(list, index * 10);
}, 500)
}
addBgc();
}, 1000);
console.log(timer)
}
}
?
四、備注
因為用rem進行了適配，所以在js代碼中，有相應的單位轉換，px轉rem
?
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
工作中這樣的輪播圖很常見，雖然網上插件有很大可以實現這個效果，但是自己動手敲出來感覺會不一樣。希望能對朋友們有幫助。
?
:表單校驗詳解)
