一个基于jquery的滑屏插件（支持移动端手势滑动，滚轮，键盘上下键）

/*

@require /statics/js/jquery-1.9.1.min.js

*/

!function($){
var index = 0,
settings = {
section: ".panel",//选择器
easing: "linear",//动画效果
scrollSpeed: 300,//动画速度
//scrollbars: true,
axis:"y",//滚动方向
m_axis:"y",//移动端手势滑动方向
target:"html,body",
callback:function(){}
};
var animateScroll = function(i,d){
if(d == 'x'){
var w = document.body.clientWidth;
w = (- w * i) + 'px';
$(settings.section).parent().stop().animate({marginLeft:w},settings.speed,settings.easing,settings.callback)
}else{
var h = document.body.clientHeight;
h = (-h * i) + 'px';//往上滚
$(settings.section).parent().stop().animate({marginTop: h},settings.scrollSpeed,settings.easing,settings.callback);
}
$('.slide-indicators li').length ? $('.slide-indicators li').eq(i).addClass('active').siblings().removeClass('active') : '';
}
$.animateScroll = function(){
animateScroll(index,settings.axis);
}
$.scrollify = function(options){
var timeoutId = false;
var touches,
startX = 0,
startY = 0,
clientX = 0,
clientY = 0;
var scrollHander = {
wheelHander:function(e){
e = e || window.event;
e.preventDefault();
if(timeoutId){
clearTimeout(timeoutId);  
}
timeoutId = setTimeout(function(){
var delta = -e.detail / 3 || e.wheelDelta / 120;
var i = $(e.target).closest(settings.section).index();
if(delta > 0){
i > 0 ? i-- : '';
animateScroll(i,settings.axis);
}else{
i < $(settings.section).length - 1 ? i ++ : '';
animateScroll(i,settings.axis);
}
index = i;
},25);
},
gestureHander:function(e){
e = e || window.event;
e.preventDefault();
switch (e.type) {
case 'touchstart':
touches = e.originalEvent ? e.originalEvent.touches : e.touches;   
startX = touches[0].clientX;
startY = touches[0].clientY;
case 'touchmove':
touches = e.originalEvent ? e.originalEvent.touches : e.touches;  
clientX = touches[0].clientX;
clientY = touches[0].clientY;
case 'touchend':
var i = $(e.target).closest(settings.section).index();
if((clientX - startX > 30 && settings.m_axis == 'x') || (clientY - startY > 30 && settings.m_axis == 'y')){
i > 0 ? i-- : '';
animateScroll(i,settings.m_axis);
}else if((clientX - startX < -30 && settings.m_axis == 'x') || (clientY - startY < -30 && settings.m_axis == 'y')){
i < $(settings.section).length - 1 ? i++ : ''
animateScroll(i,settings.m_axis);
}
}
},
keyHander:function(e){
e = e || window.event;
e.preventDefault();
if(e.keyCode==38) {
if(index > 0) {
index --;
}
animateScroll(index,settings.axis);
} else if(e.keyCode==40) {
if(index < $(settings.section).length - 1) {
index ++;
}
animateScroll(index,settings.axis);
}
},
init:function(){
settings = $.extend(settings, options);
//给页面绑定滑轮滚动事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollHander.wheelHander, false);
//手机端手势事件
//设置{ passive: false }移动touch事件阻止默认事件   
document.addEventListener('touchstart', scrollHander.gestureHander, { passive: false });  
document.addEventListener('touchmove', scrollHander.gestureHander, { passive: false }); 
//document.addEventListener('touchend', scrollHander.gestureHander, { passive: false }); 
//键盘事件
document.addEventListener('keyup', scrollHander.keyHander); 
}
window.onmousewheel = scrollHander.wheelHander;
//$(document).bind('keyup', scrollHander.keyHandler);


//解决阻止默认事件之后输入框无法输入或者点击
//原理：页面加载完成后查找到所有的'input, select, button'元素并依次绑定'touchstart'或'mousedown'事件，
//在执行事件的时候停止事件的传播，这样行了
document.querySelectorAll('input, select, button,label,a').forEach(function(el){
el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){
e.stopPropagation();
});
})


//圆点点击
!!$('.slide-indicators li').length ? $(document).on('click','.slide-indicators li',function(){
animateScroll($(this).index(),settings.axis);
}) : '';
}
}
scrollHander.init();
}

}(jQuery)

/*使用方法：

$.scrollify({
        section: '.panel',
        axis:"x",
        m_axis:"y",
        scrollSpeed: 200

    });

*/