CSStransition制作全屏页面滚动幻灯片

最近在网上看到一些页面效果，可以用于后续的页面切换，于是自己做了一个思路：css设置classsurface设置transitiontransform:translateX(100%)属性设置DOM属性动画效果监控页面鼠标sliding事件、键盘点击事件、鼠标点击事件浏览器兼容性测试、effect事件测试css效果主要设置切换时新增类名[active]设置transfrom时移入移出时X轴的移动距离，100%/-100%.page.active{z-index:5;过渡：不透明度.7s，z-index0s.7s，-webkit-transform.7s；过渡：变换.7s，不透明度.7s，z-index0s.7s；转换：转换.7s，不透明度.7s，z-index0s.7s，-webkit-transform.7s;}.page.active.half{-webkit-transform:translateX(0)!important;变换：翻译X（0）！重要的;过渡：-webkit-transform.7s缓出；过渡：变换.7s缓出；transition:transform.7sease-out,-webkit-transform.7sease-out;}.page.previous{opacity:0.4!important;可见性：可见！重要；过渡：不透明度.7s，z-index0s，-webkit-transform.7s；过渡：变换.7s，不透明度.7s，z-index0s；过渡：变换.7s，不透明度.7s，z-index0s，-webkit-transform.7s；}.page.small{-webkit-transform:scale(0.8);变换：比例（0.8）；opacity:0;}.page.small.half{-webkit-transform:translateX(0)!important;transform:translateX(0)!important;}.page:nth-child(2).left{-webkit-transform:translateX(-100%);transform:translateX(-100%);}.page:nth-child(2).right{-webkit-transform:translateX(100%);transform:translateX(100%);}.page:nth-child(3).left{-webkit-transform:translateX(-100%);transform:translateX(-100%);}.page:nth-child(3).right{-webkit-transform:translateX(100%);transform:translateX(100%);}.page:nth-child(4).left{-webkit-transform:translateX(-100%);transform:translateX(-100%);}.page:nth-child(4).right{-webkit-transform:translateX(100%);transform:translateX(100%);}.page:nth-child(5).left{-webkit-transform:translateX(-100%);transform:translateX(-100%);}.page:nth-child(5).right{-webkit-transform:translateX(100%);转换：translateX(100%)；}。page:nth-child(6).left{-webkit-transform:translateX(-100%);transform:translateX(-100%);}.page:nth-child(6).right{-webkit-transform:translateX(100%);transform:translateX(100%);}.page:nth-child(7).left{-webkit-transform:translateX(-100%);transform:translateX(-100%);}.page:nth-child(7).right{-webkit-transform:translateX(100%);transform:translateX(100%);}.page:nth-child(8).left{-webkit-transform:translateX(-100%);转换：translateX(-100%);}.page:nth-child(8).right{-webkit-transform:translateX(100%);transform:translateX(100%);}.page:nth-child(9).left{-webkit-transform:translateX(-100%);transform:translateX(-100%);}.page:nth-child(9).right{-webkit-transform:translateX(100%);transform:translateX(100%);}.page:nth-child(10).left{-webkit-transform:translateX(-100%);transform:translateX(-100%);}.page:nth-child(10).right{-webkit-transform:translateX(100%);转换：translateX(100%);}jq实现切换过程functionpagination(page,movingUp){scrolling=true;vardiff=curPage-page,oldPage=curPage;当前页面=页面；$(".page").removeClass("活动小前");$(".page-"+page).addClass("active");$(".nav-btn").removeClass("active");$(".nav-page"+page).addClass("active");if(page>1){$(".page-"+(page-1)).addClass("previous");if(movingUp){$(".page-"+(page-1)).hide();varhackPage=页面；setTimeout(function(){$(".page-"+(hackPage-1)).show();},600);}while(--page){$(".page-"+page).addClass("small");}}console.log(diff)if(diff>1){for(varj=page+1;j1){curPage--;pagination(curPage,true);}}functionnavigateDown(){if(curPage0||e.originalEvent.detail<0){navigateUp();}else{navigateDown();}}});$(document).on("点击",".scroll-btn",function(){if(滚动)return;if($(this).hasClass("up")){navigateUp();}else{navigateDown();}});$(document).on("keydown”,function(e){if(scrolling)return;if(e.which===38){navigateUp();}elseif(e.which===40){navigateDown();}});$(document).on("click",".nav-btn:not(.active)",function(){如果（滚动）返回；分页(+$(this).attr("数据目标"));});测试：鼠标键盘切换和点击切换过程中，没有出现切换不流畅的事件，但是由于使用了绝对定位，不适合移动端，总结：动画效果主要是通过csstransfrom实现，监听jqDOM属性的变化，实现动画效果切换。移动端必须在最外层DOM层设置相对定位，保证移动端适配github地址：https://github.com/panpanxiong3/Front-end-effect-link/tree/master/js/全屏页面滚动幻灯片背景切换