前端开发日常——CSS动画无限轮播( 二 ) _生活百科

js应用于页面元素，飞入飞出，飞出后删除，*动画在结束后并不会改变元素实际位置。所以要在动画结束前，移除元素，避免它回到之前位置，挡住当前页，发生“闪烁”
//页面滑入，要显示的页面this.slipIn = function(pageNo){$("#supplierListPage_"+pageNo).addClass("slip_in_animation");};//页面滑出，this.slipOut = function(pageNo){$("#supplierListPage_"+pageNo).addClass("slip_out_animation");//移除上一页,定时比动画稍短，避免闪烁setTimeout(function(){$("#supplierListPage_"+pageNo).remove();},900);};翻页的逻辑，第一次不滚动；滚到头，把最后一页飞出，第一页飞入。
this.switchNext = function(pageNo){//附加生成新的页面var newPageHtml =_this.makePageHtml(pageNo);$("#"+ _this.containerId).append(newPageHtml);//多于一页的情况if(_this.firtshow){_this.firtshow= false;//第一次换页不需要移除之前页面。}else{//前面已经有显示过的页面，需要把前面的页面滚动出去。var olderPage =pageNo -1;if(olderPage <=0){//当前页是第一个，前一页就是最后一页olderPage = _this.totalPage;}_this.slipOut(olderPage);}_this.slipIn(pageNo);};定时滚动到下一页。如果是最后一页，重新开始第一页。
this.startRolling = function(){_this.switchNext(_this.curPage);//按间隔轮播_this.switchTimer =setInterval(function(){if(_this.totalPage == 1)return;if(_this.curPage < _this.totalPage) {_this.curPage++;}else{_this.curPage = 1;}_this.switchNext(_this.curPage);},_this.switchInterval);};写到这里，下面是完整代码，需要的可以参考。
完整的代码CSS：

文章插图

文章插图
.slip_in_animation{animation: slip_in 1s;}.slip_out_animation{animation: slip_out 1s;}/*右侧滑入*/@keyframes slip_in{from {transform:translateX(100%);}to {transform:translateX(0);}}/*右侧滑入*/@keyframes slip_out{from {transform:translateX(0);}to {transform:translateX(-100%);}}完整JS：

文章插图

文章插图
function SupplierListTable(){var _this = this;//echart 图表对象。//轮播间隔毫秒this.switchInterval = 5000;//当前轮播的页，从1开始this.curPage=1;//每页条数this.pageSize = 5;//当前数据对应总页数this.totalPage = 0;//数据列表this.chartDataList = new Array();//第一次展示标志this.firtshow =true;this.containerId = null;//轮播定时器this.switchTimer = null;this.init= function(containerId){_this.containerId = containerId;//初始化图表$("#"+containerId).html("");_this.reloadData(containerId);};this.getTotalPage = function(){var totalPage= Math.ceil(_this.chartDataList.length/_this.pageSize);return totalPage;};this.reloadData =https://www.huyubaike.com/biancheng/function(containerId){//从网络请求数据。setTimeout(function(){_this.chartDataList= [{name:"供应商1",percent:"12%"},{name:"供应商2",percent:"13%"},{name:"供应商3",percent:"14%"},{name:"供应商4",percent:"15%"},{name:"供应商5",percent:"16%"},{name:"供应商6",percent:"13%"},{name:"供应商7",percent:"14%"},{name:"供应商8",percent:"15%"},{name:"供应商9",percent:"16%"}];_this.totalPage = _this.getTotalPage();_this.curPage = 1;_this.stopRolling();_this.startRolling();},300);};this.stopRolling= function(){if(_this.switchTimer != null){clearInterval(_this.switchTimer);_this.switchTimer = null;_this.curPage = 0;}};this.startRolling = function(){_this.switchNext(_this.curPage);//按间隔轮播_this.switchTimer =setInterval(function(){if(_this.totalPage == 1)return;if(_this.curPage < _this.totalPage) {_this.curPage++;}else{_this.curPage = 1;}_this.switchNext(_this.curPage);},_this.switchInterval);};this.switchNext = function(pageNo){//附加生成新的页面var newPageHtml =_this.makePageHtml(pageNo);$("#"+ _this.containerId).append(newPageHtml);//多于一页的情况if(_this.firtshow){_this.firtshow= false;//第一次换页不需要移除之前页面。}else{//前面已经有显示过的页面，需要把前面的页面滚动出去。var olderPage =pageNo -1;if(olderPage <=0){//当前页是第一个，前一页就是最后一页olderPage = _this.totalPage;}_this.slipOut(olderPage);}_this.slipIn(pageNo);};//生成指定页的html 。this.makePageHtml = function(pageNo){var startRecIndex=_this.pageSize * (pageNo - 1);var endRecIndex =_this.pageSize *pageNo ;if(endRecIndex > _this.chartDataList.length){endRecIndex = _this.chartDataList.length;}var html = "<div style='width: 100%;box-sizing: border-box;position: absolute;padding: 20px;' id='supplierListPage_" +pageNo+"'>";for (var i = startRecIndex; i < endRecIndex; i++) {html+= "<div style=' margin-bottom: 10px;border-bottom: 1px solid #484752;'><span style='color: white'>" +_this.chartDataList[i].name+"</span><span style='float: right;color: #0c9c6e'>"+_this.chartDataList[i].percent+"</span></div>"}html+="</div>"return html;};//页面滑入，要显示的页面this.slipIn = function(pageNo){$("#supplierListPage_"+pageNo).addClass("slip_in_animation");};//页面滑出，this.slipOut = function(pageNo){$("#supplierListPage_"+pageNo).addClass("slip_out_animation");//移除上一页,定时比动画稍短，避免闪烁setTimeout(function(){$("#supplierListPage_"+pageNo).remove();},900);};}$(document).ready(function(){var containerId = 'supplierListChart';var supplierListTable = new SupplierListTable();supplierListTable.init(containerId);});