本例主要实现三个需求:
1.点击开始则给计时器并运作
2.中途停止时点击开始则继续
3.到点停止时点击开始则没有满三秒不准继续，满则继续
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部分主要是在一个区域内放几张图片，只留露出一张图片的尺寸，这也是大部分轮播图的实现方式。
js部分
使用了函数式编程思想，代码变得简洁凝练很多
// 点停止则停，中途点则停，到点停则停，三秒后给满三秒的标志
// 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(() => {
//执行回调
intValOperater()
//此处时间固定为2s
}, 5);
}
};
//运作:
let scrollGoOn = function () {
outBlock.scrollLeft++;
};
//停止:
let scrollStop = function () {
window.clearInterval(interValTimer);
interValTimer = null;
};
// 到点操作
let intValOperater = function(){
isAtPoint = false;
isDown = true;
//判断是否到点,为立即执行的依据
let scrollLeft = Math.floor(outBlock.scrollLeft)
if (scrollLeft !== 0 && Math.floor(scrollLeft) % 265 === 0) {
isAtPoint = true;
isDown = false;
//单例,到点则起码等三秒,三秒内点击开始则无效
if(!timeoutTimer){
timeoutTimer = setTimeout(() => {
isDown = true;
//点击结束,三秒内点击开始无效,次数为侦听
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;
}
//继续走
scrollGoOn()
}else{
isClickstart = true;
}
};
let end = function(){
//点击停止则任何时候都可以停止
scrollStop()
isClickStop = true;
}
总结:
轮播图核心思想就是横向(或者竖向)摆放多张图片，只保留一张图的展示位置，其余图片隐藏。然后添加定时器，用将滚动条移动，则图片自然就轮播了。
