本例主要實現(xiàn)三個需求:
1.點擊開始則給計時器并運作
2.中途停止時點擊開始則繼續(xù)
3.到點停止時點擊開始則沒有滿三秒不準繼續(xù)，滿則繼續(xù)
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="../../dom類測試/reset.css" />
<style>
html,
body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.out-block {
width: 260px;
height: 150px;
margin: 0 auto;
background-color: rgb(35, 35, 35, 0.6);
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
}
.out-block ul {
white-space: nowrap;
}
.out-block ul li {
width: calc(100% - 20px);
display: inline-block;
list-style-type: none;
margin: 10px;
}
.out-block ul li .img-blcok {
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<button onclick="start()">開始</button>
<button onclick="end()">結束</button>
<div class="out-block">
<ul>
<li>
<div class="img-blcok">
<img
src="../../測試文件/-6e24b109b13b4c98.jpg"
alt=""
width="100%"
height="100%"
/>
</div>
</li>
<li>
<div class="img-blcok">
<img
src="../../測試文件/110328s72xxse7lfis9fnd.jpg"
alt=""
width="100%"
height="100%"
/>
</div>
</li>
<li>
<div class="img-blcok">
<img
src="../../測試文件/155922dx0d0yyy7ukzxqyw.jpg"
alt=""
width="100%"
height="100%"
/>
</div>
</li>
<li>
<div class="img-blcok">
<img
src="../../測試文件/213601f2xz7usscm2z1mjh.jpg"
alt=""
width="100%"
height="100%"
/>
</div>
</li>
<li>
<div class="img-blcok">
<img
src="../../測試文件/u=3777236932,922309564&fm=214&gp=0.jpg"
alt=""
width="100%"
height="100%"
/>
</div>
</li>
<li>
<div class="img-blcok">
<img
src="../../測試文件/bb4aa884e3493ba7efcbafdcc71dede0fb150bee.jpg"
alt=""
width="100%"
height="100%"
/>
</div>
</li>
<li>
<div class="img-blcok">
<img
src="../../測試文件/img-8d57a33b99ba5eec789e54561cad7a0f.jpg"
alt=""
width="100%"
height="100%"
/>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
html部分主要是在一個區(qū)域內(nèi)放幾張圖片泉懦，只留露出一張圖片的尺寸，這也是大部分輪播圖的實現(xiàn)方式疹瘦。
js部分
使用了函數(shù)式編程思想崩哩，代碼變得簡潔凝練很多
// 點停止則停，中途點則停，到點停則停邓嘹，三秒后給滿三秒的標志
// 1.運作 2.停止 3.計時三秒給標志
let outBlock = document.getElementsByClassName("out-block")[0];
let interValTimer = null;
let timeoutTimer = null;
let timeout = 3000;
let isClickStop = true;
let isClickstart = false;
let isAtPoint = false;
let isDown = true;
//給計時器
let makeTimer = function () {
//單例模式
if (!interValTimer) {
interValTimer = setInterval(() => {
//執(zhí)行回調(diào)
intValOperater()
//此處時間固定為2s
}, 5);
}
};
//運作:
let scrollGoOn = function () {
outBlock.scrollLeft++;
};
//停止:
let scrollStop = function () {
window.clearInterval(interValTimer);
interValTimer = null;
};
// 到點操作
let intValOperater = function(){
isAtPoint = false;
isDown = true;
//判斷是否到點,為立即執(zhí)行的依據(jù)
let scrollLeft = Math.floor(outBlock.scrollLeft)
if (scrollLeft !== 0 && Math.floor(scrollLeft) % 265 === 0) {
isAtPoint = true;
isDown = false;
//單例,到點則起碼等三秒,三秒內(nèi)點擊開始則無效
if(!timeoutTimer){
timeoutTimer = setTimeout(() => {
isDown = true;
//點擊結束,三秒內(nèi)點擊開始無效,次數(shù)為偵聽
if(isClickstart){
start()
isClickstart = false;
}else{
scrollGoOn()
}
//配合單例
window.clearTimeout(timeoutTimer)
timeoutTimer = null
}, timeout);
}
}else{
scrollGoOn()
}
}
//點擊開始
let start = function () {
if(isDown){
if(isClickStop){
makeTimer()
isClickStop = false;
}
//繼續(xù)走
scrollGoOn()
}else{
isClickstart = true;
}
};
let end = function(){
//點擊停止則任何時候都可以停止
scrollStop()
isClickStop = true;
}
總結:
輪播圖核心思想就是橫向(或者豎向)擺放多張圖片酣栈，只保留一張圖的展示位置，其余圖片隱藏汹押。然后添加定時器矿筝，用將滾動條移動，則圖片自然就輪播了棚贾。
