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

作者：从前慢现在也慢 | 2024-07-17 10:17:38

踩

h5 公告从右向左的滚动

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

思路：

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/839374