通常看到的轮播（例如从右到左）的最后一页到第一页会看到页面朝右回滚的过程。
现在我希望能实现圆环式无限轮播的效果。
两种轮播效果对比
通常，轮播效果实现逻辑是在视框内，隔一段时间将需要展示的内容向左移动一页的宽度，移到最后一页时再将内容左边移动距离重置为0。
这样会看到最后一张跳到第一张的过程，效果像酱紫👇
如果想做到无限循环的效果，只需要稍微改动一点点逻辑，就可以实现如下的效果：
代码剖析
html 和 css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <style type='text/css'>
.carousel {
font-size: 0;
overflow: hidden;
width: 100px;
height: 50px;
margin: 0 auto;
white-space: nowrap;
}
.carousel .content {
display: inline-block;
white-space: nowrap;
}
.carousel .contentItem {
display: inline-block;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 14px;
}
</style>
<div class='circleCarousel'>
<div class='carousel'>
<div class='content'>
<div class='contentItem' style='background-color: #A18E58'>1</div>
<div class='contentItem' style='background-color: #FFCEA6'>2</div>
<div class='contentItem' style='background-color: #DCDCDC'>3</div>
</div>
</div>
</div>
|
javascript 逻辑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| const itemLength = $('.circleCarousel .contentItem').length;
const $content = $('.circleCarousel .content');
$content.append($content.find('.contentItem:first').clone());
let currentItem = 0;
setInterval(function () {
currentItem++;
$('.circleCarousel .content').css({
'transform': `translateX(-${100 * currentItem}px)`,
'transition': 'transform 0.5s ease',
});
if (currentItem === itemLength) {
currentItem = 0;
setTimeout(function () {
$('.circleCarousel .content').css({
'transform': 'translateX(0)',
'transition': 'unset',
});
}, 1000);
}
}, 2000);
|
如果去掉 3-4行 和 20行 的代码，就是普通的轮播效果了。是不是十分简单！💅