【前端100问】Q63：如何设计实现无缝轮播
2021-01-28 本文已影响0人
alanwhy
写在前面
此系列来源于开源项目：前端 100 问：能搞懂 80%的请把简历给我
为了备战 2021 春招
每天一题，督促自己
从多方面多角度总结答案，丰富知识
如何设计实现无缝轮播
简书整合地址：前端 100 问
正文回答
代码千万种，这里主要说一下两种实现思想：
- 每次轮播元素动画执行到末尾的时候迅速让其位置恢复原位，造成视觉上的无缝轮播
- 将轮播元素复制一份，第一个
item元素轮播执行完后将其删除后添加在整个轮播列表的最后，造成循环轮播
<div class="slide">
<ul>
<li>图片1</li>
<li>图片2</li>
<li>图片3</li>
</ul>
</div>
1、最外层 div.slide 定宽、相对定位 relative
2、ul 足够宽，最起码 li 数\*li 宽度，这里有个技巧，直接 width: 9999em，目的是让里面的所有 li 一字排开
3、滚动效果通过控制 ul 的 left 或者 transform 来进行滚动效果
4、到了最后一个 li，往后看第一个 li 的时：
4.1、准备继续滚动，把最后一个的 li 设置为相对定位 relative，left 值为此时此刻相对 ul 的位置（设置的时候不要带缓动效果），目的是让最后一个 li 不动。
4.2、然后把 ul 的 left 或者 transform 设为 0（这步没有缓动效果），
4.3、然后再正常的开始一样出现第一个 li 的滚动效果（这步有缓动效果）
4.4、最后等无缝的第一个 li 效果完成后，把最后一个 li 的 left 值复原为 0
5、到第一个 li，往前看最后一个 li 时，也是和上面同理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>轮播</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
#continer {
width: 300px;
height: 200px;
position: relative;
margin: 20px auto;
border: 1px solid;
overflow: hidden;
}
#lunbo {
width: 9999em;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
li {
float: left;
width: 300px;
height: 200px;
text-align: center;
line-height: 200px;
color: brown;
font-size: 30px;
}
</style>
</head>
<body>
<div id="continer">
<ul class="ul" id="lunbo">
<li class="list">1</li>
<li class="list">2</li>
<li class="list">3</li>
<li class="list">4</li>
<li class="list">5</li>
</ul>
</div>
</body>
<script src="./js/jquery3.0.min.js"></script>
<script>
let selectNum = 0;
function lunboFun(selectNum, time) {
$("#lunbo").animate(
{
left: -1 * selectNum * 300,
},
time,
() => {
selectNum++;
setTimeout(() => {
if (selectNum > 4) {
selectNum = 0;
$("ul li:last").css(
{
position: "absolute",
},
0
);
$("ul li:last").animate(
{
left: -300,
},
0
);
$("#lunbo").animate(
{
left: 300,
},
0
);
} else if (selectNum < 3) {
$("ul li:last").css(
{
position: "relative",
left: 0,
},
0
);
}
lunboFun(selectNum, 1000);
}, 2000);
}
);
}
lunboFun(selectNum, 1000);
</script>
</html>
