文章目录
  1. 1. 全屏滚动插件
    1. 1.1. 模板图如下

全屏滚动插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
/*
***
auther:LGF;
date:2017-06-28;
blog:lgf196.top;
plug-in:XSwitch;
direction:只需引用到项目中即可,用法:$('xxx').XSwitch({属性:值});
attention:属性值请参考下面的
***
*/
if(window.jQuery===undefined){
throw new Error("此插件依赖于jQuery,请引入jQuery库");
}
;(function ($) {
$.fn.XSwitch = function (options) {
/* 保持链式调用 */
return this.each(function () {
/* 单例模式 */
var _this = $(this),
instance = _this.data('XSwitch');
if (!instance) {
instance = new XSwitch(_this, options);
_this.data('XSwitch', instance);
}
/* 可以在外部直接调用插件内部的方法 */
if ($.type(options) === 'string') {
return instance[options]();
}
});
}
/* 添加默认配置 */
$.fn.XSwitch.defaults = {
selectors: {
sections: '.sections', //容器类名
section: '.section', //子容器类名,即每个单页
page: '.pages', //slider类名 插件会生成一个ul侧边栏
active: '.active' //被选中的slider下li的类名
},
index: 0, //起始页下标
easing: 'ease', //动画类型,支持transition所有类型
duration: 500, //动画执行时间 单位毫秒
loop: false, //是否支持循环滑动
pagination: true, //是否分页
keyboard: true, //是否支持键盘滚动事件
direction: 'vertical', //滑动方向 默认为垂直 设置为 horizontal 将水平滑动
callback: '' //滑动完成后的回调函数
}
/* 获取浏览器前缀 */
var _prefix = (function (temp) {
var aPrefix = ['webkit', 'moz', 'o', 'ms'],
props = '';
for (var i = 0, len = aPrefix.length; i < len; i ++) {
props = aPrefix[i] + 'Transition';
if (temp.style[props] !== undefined) {
return '-' + aPrefix[i].toLowerCase() + '-';
}
return false;
}
})(document.createElement('div'));
var XSwitch = (function () {
function XSwitch(element, options) {
/* 深拷贝并合并 */
this.settings = $.extend(true, $.fn.XSwitch.defaults, options);
this.element = element;
this.init();
}
XSwitch.prototype = {
/* 初始化DOM操作,布局,分页及绑定事件 */
init: function () {
var _this = this;
this.selectors = this.settings.selectors;
/* 获取相应的DOM元素 */
this.sections = this.element.find(this.selectors.sections);
this.section = this.sections.find(this.selectors.section);
/* 获取方向,垂直为true,水平为false */
this.direction = this.settings.direction === 'vertical' ? true : false;
/* 获取滑动页面数量 */
this.pagesCount = this.pagesCount();
/* 获取起始下标 */
this.index = (this.settings.index >=0 && this.settings.index < this.pagesCount) ? this.settings.index : 0;
/* 用于判断页面是否滚动中 */
this.canScroll = true;
/* 如果为横屏,进行横屏布局 */
if (!this.direction) {
_initLayout(_this);
}
/* 如果设置可分页,实现分页的DOM及CSS样式 */
if (this.settings.pagination) {
_initPaging(_this);
}
/* 绑定事件 */
_initEvent(_this);
},
/* 获取滑动页面数量 */
pagesCount: function () {
return this.section.size();
},
/* 根据方向获取滑动页面的高度或宽度 */
switchLength: function () {
return this.duration ? this.element.height() : this.element.width();
},
/* 向上/前滑动 */
prve: function () {
var _this = this;
/* 边界值判断 */
if (this.index > 0) {
this.index --;
} else if (this.settings.loop) {
this.index = this.pagesCount - 1;
}
_scrollPage(_this);
},
/* 向下/后滑动 */
next: function () {
var _this = this;
if (this.index < this.pagesCount) {
this.index ++;
} else if (this.settings.loop) {
this.index = 0;
}
_scrollPage(_this);
}
};
/* 私有方法 */
/* 横屏布局 */
function _initLayout(_this) {
var width = (_this.pagesCount * 100) + '%',
cellWidth = (100 / _this.pagesCount).toFixed(2) + '%';
_this.sections.width(width);
_this.section.width(cellWidth).css('float', 'left');
}
/* 实现分页的DOM结构以及CSS样式 */
function _initPaging(_this) {
/* 去点 */
var pagesClass = _this.selectors.page.substring(1),
pageHtml = '<ul class="' + pagesClass + '">';
_this.activeClass = _this.selectors.active.substring(1);
for (var i = 0, len = _this.pagesCount; i < len; i ++) {
pageHtml += '<li></li>';
}
pageHtml += '</ul>';
_this.element.append(pageHtml);
var pages = _this.element.find(_this.selectors.page);
_this.pageItem = pages.find('li');
_this.pageItem.eq(_this.index).addClass(_this.activeClass);
if (_this.direction) {
pages.addClass('vertical');
} else {
pages.addClass('horizontal');
}
}
/* 绑定事件 */
function _initEvent(_this) {
/* slider li点击事件 */
_this.element.on('click', _this.selectors.page + ' li', function () {
_this.index = $(this).index();
_scrollPage(_this);
});
/* 鼠标滚轮事件 */
_this.element.on('mousewheel DOMMouseScroll', function (e) {
/* 判断动画是否执行,在执行中则不重复触发 */
if (!_this.canScroll) {
return;
}
/* 兼容火狐 || chrome || IE9+ */
var delta = -e.originalEvent.detail || -e.originalEvent.deltaY || e.originalEvent.wheelDelta;
if (delta > 0 && (_this.index && !_this.settings.loop || _this.settings.loop)) {
_this.prve();
} else if (delta < 0 && (_this.index < (_this.pagesCount - 1) && !_this.settings.loop || _this.settings.loop)) {
_this.next();
}
});
/* 键盘事件 */
if (_this.settings.keyboard) {
$(window).on('keydown', function (e) {
var keyCode = e.keyCode;
if (keyCode === 37 || keyCode === 38) {
_this.prve();
} else if (keyCode === 39 || keyCode === 40) {
_this.next();
}
});
}
/* 浏览器尺寸改变 */
$(window).resize(function () {
var currentLength = _this.switchLength(),
offset = _this.settings.direction ? _this.section.eq(_this.index).offset().top : _this.section.eq(_this.index).offset().left;
if (Math.abs(offset) > currentLength / 2 && _this.index < (_this.pagesCount - 1)) {
_this.index ++;
}
if (_this.index) {
_scrollPage(_this);
}
});
/* 动画执行结束 */
_this.sections.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function () {
_this.canScroll = true;
if (_this.settings.callback && typeof(_this.settings.callback) === 'function') {
_this.settings.callback();
}
});
}
/* 滑动动画 */
function _scrollPage(_this) {
var dest = _this.section.eq(_this.index).position();
if (!dest) {
return;
}
_this.canScroll = false;
if (_prefix) {
_this.sections.css(_prefix + 'transition', 'all ' + _this.settings.duration + 'ms ' + _this.settings.easing);
var translate = _this.direction ? 'translateY(-' + dest.top + 'px)' : 'translateX(-' + dest.left + 'px)';
_this.sections.css(_prefix + 'transform', translate);
} else {
var animateCss = _this.direction ? {top: -dest.top} : {left: -dest.left};
_this.sections.animate(animateCss, _this.settings.duration, function () {
_this.canScroll = true;
if (_this.settings.callback && type(_this.settings.callback) === 'function') {
_this.settings.callback();
}
});
}
if (_this.settings.pagination) {
_this.pageItem.eq(_this.index).addClass(_this.activeClass).siblings('li').removeClass(_this.activeClass);
}
}
return XSwitch;
})();
})(jQuery);
/* 通过添加属性名调用插件默认执行XSwitch方法 */
$(function () {
$('[data-XSwitch]').XSwitch();
})

模板图如下

提示:只需将代码引入项目中即可,代码没有压缩,可以自行压缩

文章目录
  1. 1. 全屏滚动插件
    1. 1.1. 模板图如下