页面实时刷新的同时，并横向滚动显示数据

当页面不需要实时刷新时，滚动显示数据，例如对li里面的数据进行滚动显示，直接使用jquery的appendTo()方法，然后在外面定义时间间隔来执行，这里可以实现横向纵向的滚动显示，代码如下：

setInterval(function() {
    $('.header-list > li:first').appendTo($('.header-list'));
}, 2000)

当页面需要实时刷新，每隔2s就要从后台获取数据，刷新页面数据的同时又要滚动显示，比如2s后显示2s后刷新后的第二个li的数据，4s后显示4s后刷新的第三个li的数据，以此类推。如果仍采用上面的方法，会导致每次页面刷新后都会从第一个li的数据滚动显示。以下方法通过定义一个参数，在每次数据刷新后，将新的数据通过将数组第一个数据入栈，再出栈，根据参数的值，执行相应次数的出栈入栈，遍历最后的数组显示出来，这样每次刷新后滚动显示的数据就是相应刷新后的数据。代码如下：

//实时刷新模块数据
setTimeout(function fn() {
	violateCar();
	setTimeout(fn, 2000);
}, 2000);

var indexTitle = -1;  //每次定时刷新后的滚动的数据数量
/* 违规车辆接口 */
function violateCar() {
	$.ajax({
		url: iUrl + '/LayoutData/CarViolationsList',  //获取数据的接口
		// url: 'data/empty.json',
		type: 'get',
		datatype: 'json',
		success: function(data) {
			var carList = data;
			var len = carList.length;
			var carArray = new Array();  //定义存放车牌号的数组
			var sHtml = '';

			if (len > 0) {
				$.each(data, function(key, values) { //返回的是list<String,map<String,String>>循环map
					carArray.push(values.carID);
				});
				
				if(len <= 8) {
					for (var i = 0; i < len; i++) {
						sHtml += '<li>' + carList[i].carID + '<span>[被锁定]</span></li>';
					}
				} else {
					indexTitle = (indexTitle + 1) % len;
					//实时刷新后通过push和shift出入栈将前indexTitle个数据放到数组尾部
					for (var i = 0; i < indexTitle; i++) {
						carArray.push(carArray[0]);
						carArray.shift();
					}
					console.log(carArray);
					//遍历新数组并显示
					for (var i = 0; i < carArray.length; i++) {
						sHtml += '<li>' + carArray[i] + '<span>[被锁定]</span></li>';
					}
				}
				
				$('.header-list').empty().append(sHtml);

				//横向滚动显示数据
				/* setInterval(function() {
					$('.header-list > li:first').appendTo($('.header-list'));
				}, 2000) */
				
			} else {
				sHtml += '<div class="tab-none">暂无数据</div>';
			}
		}
	});
}

效果如下：