-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdemo.htm
178 lines (150 loc) · 6.12 KB
/
demo.htm
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
<!DOCTYPE html>
<html>
<head>
<!--
___________ .__ __ __ __ .__ .___
\_ _____/___ |__| | __ ____ / \ / \___________| | __| _/
| __)/ __ \| | |/ // __ \ \ \/\/ / _ \_ __ \ | / __ |
| \\ ___/| | <\ ___/ \ ( <_> ) | \/ |__/ /_/ |
\___ / \___ >__|__|_ \\___ > \__/\ / \____/|__| |____/\____ |
\/ \/ \/ \/ \/ \/
废客联邦
http://www.FK68.net/
-->
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, minimal-ui">
<title>FKPageTransitions响应式jQuery插件滑动翻页组件</title>
<!-- jQuery library -->
<script src="jquery.min.js"></script>
<!-- FKPageTransitions Javascript file -->
<script src="fkpagetransitions.min.js"></script>
<!-- FKPageTransitions CSS file -->
<link href="fkpagetransitions.min.css" rel="stylesheet" />
<style type="text/css">
/* 基本 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
input,button,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
.clear {width: 100%; height: 1px; clear: both; display: block; overflow: hidden;}
html,body{height:100%; width:100%;font-family:Helvetica,Tahoma,Arial,'Microsoft YaHei',sans-serif; background:#fff;color: #51423d;}
a{ color:#51423d; text-decoration:none; }
body{background: #fff;}
body, html { font-size: 100%; padding: 0; margin: 0;color: #fff;
background: #333;overflow: hidden;}
html, body { height: 100%; }
.myfkpage{text-align: center; font-size: 33px;}
button{background: #fff; border-radius: 5px; padding: 5px 10px; border:1px solid #ddd;}
</style>
</head>
<body>
<ul class="myfkpage">
<li style="background: #0ac2d2">第一页</li>
<li style="background: #7bb7fa">第二页</li>
<li style="background: #60d7a9">第三页</li>
<li style="background: #fdc162">第四页</li>
<li style="background: #fd6a62">第五页</li>
<li style="background: #f68dbb">第六页</li>
</ul>
<div style="position: absolute; bottom: 0; left: 0; text-align: center; width: 100%;">
<button onclick="fkpage.goToPrevSlide();">上一页</button>
<button onclick="alert(fkpage.getCurrentSlide());">当前页码</button>
<button onclick="alert(fkpage.getSlideCount());">总数</button>
<button onclick="fkpage.goToNextSlide();">下一页</button>
<br/>
<button onclick="fkpage.goToSlide(3);">跳至4页</button>
<button onclick="shownewts();">切换效果</button>
<br/>
<p style="font-size: 12px;">手机上用指左右滑动屏幕操作，电脑上鼠标上下滚轮操作</p>
</div>
</body>
<script type="text/javascript">
var fkpage,cindex = 37;
function shownewts(){
if (cindex<0) cindex =37;
var tmp = fkpage.setSlideMode(cindex);
fkpage.goToNextSlide(); //下一页
cindex --;
}
$(document).ready(function(){
fkpage = $('.myfkpage').FKPageTransitions();
});
</script>
<!-- script>
//使用FKPageTransitions插件
var testing = $('#pt-main').FKPageTransitions({
// 常规设置
mode: 25, //0淡入 1在右 2上下 .... 详情参考说明
slideSelector: '', //指定子元素的对象[一般不指定]
infiniteLoop: true, //是否循环
speed: 5000, //速度[毫秒]
easing: null, //动画曲线
//startSlide: 2, //开始页ID
slideZIndex: 50, //初始z-index数
responsive: true, //绑定resize事件
wrapperClass: 'fk-page-wrapper', //主框架类名
//鼠标设置
mouseWheel:true, //是否支持滚轮
wheelThreshold:2, //灵敏度阀值
// 触摸设置
swipeThreshold: 50, //灵敏度阀值
preventDefaultSwipeX: true, //左右拉
preventDefaultSwipeY: false, //上下拉
pagerunstat:false, //是否在翻页动画进行时禁止页面内元素动画渲染
// 回调设置
// 加载完成时回调
onSliderLoad: function(currentIndex){
alert('滑块完成加载。当前页码为：'+currentIndex+' ，单击“确定”按钮继续！');
},
// 在每动画过渡开始前回调
onSlideBefore: function(newIndex,oldIndex,newElement,oldElement){
console.log(index_obj);
alert('幻灯片动画效果过渡开始。要进入的页码为：'+newIndex+' 当前页码为：'+oldIndex+' 新页DOM对象输出在控制台！');
},
// 在每动画过渡结束后回调
onSlideAfter: function(newIndex,oldIndex,newElement,oldElement){
console.log(prev_obj);
alert('幻灯片动画效果过渡完毕。当前页码为：'+newIndex+' 之前页码为：'+oldIndex+' 当前页DOM对象输出在控制台！');
},
// 下一页时回调
onSlideNext: function(newIndex,oldIndex,newElement,oldElement){
console.log(prev_obj);
alert('你的操作是[下一页]。当前页码为：'+newIndex+' 之前页码为：'+oldIndex+' 当前页DOM对象输出在控制台！');
},
// 上一页时回调
onSlidePrev: function(newIndex,oldIndex,newElement,oldElement){
console.log(index_obj);
alert('你的操作是[上一页]。当前页码为：'+newIndex+' 之前页码为：'+oldIndex+' 当前页DOM对象输出在控制台！');
},
// 窗口发生变化时回调[responsive=true]
onSliderResize: function(currentIndex) {
//slider.settings.onSliderResize.call(el, slider.active.index);
console.log('页面大小有变化。当前页码为：'+currentIndex);
}
});
var cindex = 37;
//myttttt动态设置新的翻页效果（0-37）
function myttttt(){
if (cindex<0) cindex =37;
var tmp = testing.setSlideMode(cindex);
console.log('设置翻页效果ID为：'+tmp);
testing.goToNextSlide(); //下一页
cindex --;
}
console.log('查看FKPageTransitions对象：')
console.log(testing);
</script -->
</html>