效果：一進入頁面，文字從右向左滑動，第一段文字滑到左端消失後，第二段纔開始出現，就這樣飄飄飄，最後一個在左端消失後，第一段接着來。
思路：
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` ,記得清浮動就好。