在切图网的一个前端切图项目中遇到的，用到了swiper插件实现内容切换效果，swiper是非常优秀的一款滑屏效果，有丰富的参数可以设置，能够满足做出各种复杂的交互效果，也支持回调函数，以及外部调用方法，是切图网项目中使用频繁的一款不可多得的插件，不依赖jquery，并且结合键盘控制加上swiper，通过键盘的数字键实现对内容切换的屏幕的控制，完美实现键盘任意键控制 swiper滑屏 附js代码，亲测可用。
//var footNav=['总决赛排行','一等奖','二等奖'];var swiper = new Swiper('.swiper-container', {nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',//pagination : '.swiper-pagination',pagination : false,paginationClickable: true,paginationBulletRender: function (swiper, index, className) {//return '<span class="' + className + '">' + footNav[index] + '</span>';},onSlideChangeEnd: function(swiper){//alert(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide//if(swiper.activeIndex!=0){$('.pager span').eq(swiper.activeIndex).addClass('active').siblings().removeClass('active');//}//else{// $('.pager span').removeClass('active');//}}});$(window).keypress(function (event) {console.log(event.keyCode);// document.write("你输入的字符是：" + String.fromCharCode(event.which));if(event.keyCode===49){ //数字键1swiper.slideTo(0);}if(event.keyCode===50){ //数字键2swiper.slideTo(1);}if(event.keyCode===51){ //数字键3swiper.slideTo(2);}if(event.keyCode===52){ //数字键4swiper.slideTo(3);}if(event.keyCode===53){ //数字键5swiper.slideTo(4);}});
切图网是国内专业的前端开发服务商，提供规范标准的前端切图设计稿转页面以及vue等数据联调开发，欢迎垂询。
原文链接：https://www.qietu.com/swiper-jianpan/