移動端和網頁端公告欄文字左右輪播滑動
效果：一進入頁面，文字從右向左滑動，第一段文字滑到左端消失後，第二段才開始出現，就這樣飄飄飄，最後一個在左端消失後，第一段接著來。
思路：
css樣式—外面有個固定的框框，需要輪播的文字寫在ul>li裡面，ul設定相對它的父級定位並且有固定寬高，li設定外邊距。
js部分—改變ul相對父級的left值，視覺上是文字在滑動，其實是ul的left值改變，定好速度值和最大left值，設定計時器，裡面的num值自增，達到最大left值後，num=0，目的是讓left值從0開始重複剛才改變。
下面是案例：
可以複製到自己的編輯器執行看效果
<!DOCTYPE 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，你們有更好的嘗試也可以，總之不影響效果。。 flex
4.還有我用的是佈局，推薦用，也可以給li設定float` ,記得清浮動就好。