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

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

<>思路：

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:
400px; border: 1px solid #333; overflow: hidden; margin: 0 auto; } #list {
position: absolute; left: 0; width: 20000px; height: 200px; color: #000;
font-size: 30px; font-weight: bold; display：flex; } #list li{ margin-left:
600px; } </style> </head> <body> <div id="container"> <ul id="list">
<li>浏览器兼容问题及解决方法汇总</li> <li>入门级---Vue脚手架(vue-cli)搭建过程---详版</li>
<li>js基础知识总结整理</li> </ul> </div> </body> </html>
先写个没有束缚的纯纯的原生js:
<script type="text/javascript"> window.onload = function() { //要加上这段、页面加载自动执行
var list = document.getElementById('list'); var aLi =
document.getElementsByTagName('li'); /*设置以下变量*/ var n =
list.getElementsByTagName('li').length; //获取ul下面li的个数（用来求所有margin） var newLeft
= 0; //改变ul的left的值 var speed = 1; //设置的速度参数 var s = 0; //读取li的宽总和 var num = 0;
//计时器中的num自增变量 for(var i=0;i<aLi.length;i++){ s +=
parseInt(aLi[i].offsetWidth); //offsetWidth读取的是内容高度+内边距+边宽（不包含外间距margin） } var
total = s + n*600; //获取到的所有li的宽的总和再加上他们的margin /*计时器修改left的值*/ var timer =
setInterval(function () { newLeft = -speed*num; num++;
/*达到设置的total值之后，num=0,newLeft继续从0开始*/ if(num >= total){ num = 0; }
list.style.left = newLeft + 'px'; }, 1) } </script>
下面是用jquery：

引入jquery:<script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
变量和上面是一样的，不用获取li的个数n，比较起来代码量少了一点
<script type="text/javascript"> $(function(){ var num = 0; var newLeft = 0;
var speed = 1; var s=0; $("#list li").each(function(){ s +=
$(this).outerWidth(true); //outerWidth(true)就直接获取了元素宽、内填充、边框、外边距 }); var timer
= setInterval(function(){ newLeft = -speed*num; if( num >= s ) { num = 0; }
num++; $('#list').css({'left':newLeft+'px'}) },10) } </script>
最近移动端用vue写项目用到这个，于是就出现了一些小问题：
1.滚动的内容是写在li里面的，这个是要在接口获得的data,再渲染到页面。接口写在created里面，js代码写在mounted但是读取不到ul>li
的内容，因此宽度获取失败。
原因是钩子函数的加载方式，只要改下js代码的位置写在updated里面就可以解决这个问题。
2.由于移动端页面宽度是自适应的，页面宽度是7.5rem,设置每个li的margin-left自然也是7.5rem,那么问题来了–newLeft的值是用
rem还是px？
答案依然是px，一开始我多虑写成了这样$('#list').css({'left':newLeft+'rem'}) ,这里的newLeft是乘以0.01
的，其实这样也有效果，就是觉得代码怪怪的，事实上没必要直接px就好，因为我们显示屏分辨率以px像素为单位，即使用了rem 屏幕也会转为px。
3.关于ul 设置的width: 20000px; 必须设置宽度，li
的内容不确定，我是设置了足够大的宽，为了装下滚动的内容，这个办法有点low，你们有更好的尝试也可以，总之不影响效果。。 4.还有我用的是flex
布局，推荐用，也可以给li设置float` ,记得清浮动就好。

热门工具换一换