在切图网的一个前端切图项目中遇到的,用到了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等数据联调开发,欢迎垂询。