移动端和网页端公告栏文字右向左轮播滑动

Crystal茜

于 2018-06-06 15:35:01 发布

阅读量4.5k

点赞数 1

分类专栏： share web 文章标签：轮播文字滑动公告栏

本文链接：https://blog.youkuaiyun.com/webKris/article/details/80592987

版权

本文介绍如何实现移动端和网页端公告栏的文字右向左轮播效果。通过CSS固定框框和内含的UL/LI结构，结合JS（原生JS或jQuery）改变UL的left值，实现文字的滑动效果。在Vue项目中遇到的问题包括接口数据的获取、动态宽度计算及浮动清除等，并给出了相应的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：一进入页面，文字从右向左滑动，第一段文字滑到左端消失后，第二段才开始出现，就这样飘飘飘，最后一个在左端消失后，第一段接着来。

思路：

css样式—外面有个固定的框框，需要轮播的文字写在ul>li里面，ul设置相对它的父级定位并且有固定宽高，li设置外边距。
js部分—改变ul相对父级的left值，视觉上是文字在滑动，其实是ul的left值改变，定好速度值和最大left值，设置计时器，里面的num值自增，达到最大left值后，num=0，目的是让left值从0开始重复刚才改变。
####下面是案例：
可以复制到自己的编辑器运行看效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滚动幅</title>
		<style type="text/css">
			* {
	            margin: 0;
	            padding: 0;
	            text-decoration: none;
	        }
	        li{
	        	list-style: none;
	        }                
	        #container {
	            position: relative;
	            width: 600px;
	            height: 400p

最低0.47元/天解锁文章