jquerycss3轮播案例(CSS3实现列表无限滚动/轮播效果)
类别:Web前端 浏览量:1541
时间:2021-10-23 10:51:42 jquerycss3轮播案例
CSS3实现列表无限滚动/轮播效果效果预览
思路
将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项
问题点
1.用什么方式实现无限轮播
这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理?
在列表的最后添加列表开头的重复项即可(如图中的10后面出现的1,2,3,4,5既为重复项)。
重复项添加的数目要根据当前列表的高度和列表项的高度一起确定,例如:
列表高度150px
,列表项高度30px
,则需要在当前列表尾部添加150 / 30 = 5
项重复项才可以去除留白。
2.如何让用户无感知的切换回第一项
添加好重复项之后控制好切换时机,当列表滚动到最后一项的末尾(重复项第一项的开头)时,立即进行切换。例如:
列表项共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 > li { width: 100%; /* 滚动的项目需要有具体的高度 */ height: 30px; background-color: #1ea7ff; display: flex; justify-content: center; align-items: center; color: white; } .container > .scroll-list > li:nth-child(2n) { background-color: #18d9f8; } @keyframes scroll { 100% { /* 需要滚动内容的总高度 */ top: -300px; } } </style> <body> <li class="container"> <li class="scroll-list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <!-- 下面代码是为了让滚动内容能够多展示一屏(去除留白/无限轮播):数量请自行根据高度进行计算 --> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </li> </li> </body> </html>
到此这篇关于CSS3实现列表无限滚动/轮播的文章就介绍到这了,更多相关css3列表滚动轮播内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
标签:
您可能感兴趣
- 织梦dedecms优化安全设置指南(DedeCms V5.5 性能优化方法分享)
- SQL SERVER中Merge语句的用法
- laravel怎么获取单个框架(laravel-admin自动生成模块,及相关基础配置方法)
- wxpython 弹出对话框显示图片(WxPython建立批量录入框窗口)
- python本地ocr库(详解Python安装tesserocr遇到的各种问题及解决办法)
- truncate和delete(delete、truncate、drop的区别以及该如何选择)
- python关于微信的模块(python基于itchat模块实现微信防撤回)
- mysql索引原理和优化(Mysql 索引该如何设计与优化)
- vue如何获取元素(vue第一次获取不到元素的解决方法记录)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- python的模块与包与库(Python 中包/模块的 `import` 操作代码)
- apache配置说明(深入apache host的配置详解)
- react重点和难点(关于React状态管理的三个规则总结)
- python自动解数独教学(Python判断有效的数独算法示例)
- pythonide使用教程(对Python Pexpect 模块的使用说明详解)
- phpstudy怎么配置php环境(使用phpStudy搭建php环境及安装各种php程序实战教程)
- 春节放假几天(春节放假几天2023法定几天)
- 今天 3月13日,31年前,一个英雄少年感动了中国(今天3月13日31年前)
- 你好,新成理人丨成都理工大学2019级新生开学典礼隆重举行(新成理人丨成都理工大学2019级新生开学典礼隆重举行)
- 这部民警编演的红色话剧,讲述了一个不断追寻的故事(这部民警编演的红色话剧)
- 日本菜有什么好吃(日本菜有什么好吃的做法)
- 韩国泡菜做法(韩国泡菜的做法步骤)
热门推荐
- laravel队列是如何触发的(laravel 事件/监听器实例代码)
- nginx 根据url限流(浅谈Nginx 中的两种限流方式)
- react实现js控制样式(React + Threejs + Swiper 实现全景图效果的完整代码)
- phpstudy创建网站教程(使用phpstudy中域名管理菜单创建本地站点图文)
- sqlserver索引策略(SQLServer性能优化--间接实现函数索引或者Hash索引)
- jquery中return this.each的作用
- php开发各种问题(解决php extension 加载顺序问题)
- dedecms设置二级域名(织梦DEDECMS中要删除指定IP的评论的方法)
- canvas技术开发(用canvas显示验证码的实现)
- vscode react插件(基于visual studio code + react 开发环境搭建过程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9