使用CSS3实现列表的无限滚动/轮播

效果预览

思路

将当前列表滚动至最后一项的末尾，然后瞬间切换回第一项

问题点

用什么方式实现无限轮播
这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理？
在列表的最后添加列表开头的重复项即可(如图中的10后面出现的1,2,3,4,5既为重复项)。
重复项添加的数目要根据当前列表的高度和列表项的高度一起确定，例如：
列表高度150px，列表项高度30px，则需要在当前列表尾部添加150 / 30 = 5项重复项才可以去除留白。
如何让用户无感知的切换回第一项
添加好重复项之后控制好切换时机，当列表滚动到最后一项的末尾(重复项第一项的开头)时，立即进行切换。例如：
列表项共10项，则让列表向上移动到10 * 30px = 300px时立即进行切换即可实现无感知切换

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表无限滚动</title>
</head>
<style>.container {position: relative;background-color: #a4ffcc;/* 父容器需要有明确的高度 */height: 150px;width: 200px;margin: auto;overflow: hidden;}.container > .scroll-list {position: absolute;top: 0;left: 0;width: 100%;animation: scroll 6s linear infinite normal;}.container > .scroll-list > div {width: 100%;/* 滚动的项目需要有具体的高度 */height: 30px;background-color: #1ea7ff;display: flex;justify-content: center;align-items: center;color: white;}.container > .scroll-list > div:nth-child(2n) {background-color: #18d9f8;}@keyframes scroll {100% {/* 需要滚动内容的总高度 */top: -300px;}}
</style>
<body><div class="container"><div class="scroll-list"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><!-- 下面代码是为了让滚动内容能够多展示一屏(去除留白/无限轮播)：数量请自行根据高度进行计算 --><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div></div></div>
</body>
</html>

CSS3实现列表无限滚动/轮播相关推荐

Swift 4 无限滚动轮播图(UICollectionView实现)
作为一个资深(自认为)iOS程序猿,会经常用到轮播图,但是总是感觉自己实现要比直接用别人的要方便一点,并且有一些需求需要深度定制,于是想着自己封装一个可以定制化的轮播图库JCyclePictureVi ...
css通知页面,CSS3 transition 实现通知消息轮播条
Vue 版本,拷贝到文件即可使用 {{ item }} export default { data () { return { // 开启动画 isAnimated: false, // 轮播数据 d ...
利用jQuery实现图片无限循环轮播(不借助于轮播插件)
原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...
Android之ViewPager实现图片无限循环轮播
很久没有写博客了,之前花时间写了一个Viewpager实现的无限图片轮播,个人感觉还是很好用的QAQ,源码和思路都还算清晰实现的效果图如下: 这里要补充一下,在这个项目中我把图片轮播写进了一个Vie ...
CSS3动画实现背景图轮播
CSS3动画实现背景图轮播利用css3动画切换背景图的路径:使这个动画无限循环下去,以实现背景图切换的效果. 代码: <!DOCTYPE html> <html lang=&quo ...
【Swift】自定义控件无限轮播 + 无限图片轮播
CocoaPods安装 pod 'PGBannerSwift' 复制代码使用 1.无限图片轮播首先引入import PGBannerSwift let banner = PGBanner(fram ...
一种无限循环轮播图的实现原理
本文来自 http://www.jianshu.com/p/ef03ec7f23b2 轮播实现步骤接下来,笔者将从各方面逐一分析层级结构最底层是一个UIView,上面有一个UIScrollVie ...
原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
JS经典案例-无缝滚动轮播图（纯JS）
滚动轮播图在JS初级阶段,轮播图是最基础最经典的案例,而相比于渐变轮播图,无缝滚动轮播图又要更难一点.渐变轮播图仅需要使用到点击事件.定时器等,而无缝滚动轮播图则需要考虑到第一张>最后一张, ...

CSS3实现列表无限滚动/轮播

使用CSS3实现列表的无限滚动/轮播

效果预览

思路

问题点

代码

CSS3实现列表无限滚动/轮播相关推荐

最新文章

热门文章