键盘任意键控制 swiper滑屏 附js代码

在切图网的一个前端切图项目中遇到的，用到了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){ //数字键1
swiper.slideTo(0);
}
if(event.keyCode===50){ //数字键2
swiper.slideTo(1);
}
if(event.keyCode===51){ //数字键3
swiper.slideTo(2);
}
if(event.keyCode===52){ //数字键4
swiper.slideTo(3);
}
if(event.keyCode===53){ //数字键5
swiper.slideTo(4);
}

});

切图网是国内专业的前端开发服务商，提供规范标准的前端切图设计稿转页面以及vue等数据联调开发，欢迎垂询。

原文链接：键盘任意键控制 swiper滑屏 附js代码 | 切图网