-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
432 lines (408 loc) · 14.7 KB
/
index.html
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
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>acarousel - jQuery carousel plugin</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
<style>
#carousel_container {
width: 95%;
height: 300px;
border: 1px solid #a55;
margin: 0 auto;
position: relative;
overflow: hidden;
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5);
}
#carousel {
width: 600px;
height: 300px;
margin: 0;
padding: 0;
position: absolute;
list-style-type: none;
}
#carousel li {
position: absolute;
margin: 0;
padding: 0;
border: 1px solid #a55;
float: left;
}
#carousel li img {
width: 100%;
height: 100%;
}
#c1 {
width: 200px;
height: 150px;
left: 200px;
top: 130px;
z-index: 5;
}
#c2 {
width: 150px;
height: 113px;
left: 350px;
top: 100px;
z-index: 4;
}
#c3 {
width: 100px;
height: 75px;
left: 450px;
top: 50px;
z-index: 3;
}
#c4 {
width: 80px;
height: 60px;
left: 400px;
top: 20px;
z-index: 2;
}
#c5 {
width: 70px;
height: 53px;
left: 320px;
top: 10px;
z-index: 1;
}
#c6 {
width: 70px;
height: 53px;
left: 210px;
top: 10px;
z-index: 1;
}
#c7 {
width: 80px;
height: 60px;
left: 120px;
top: 20px;
z-index: 2;
}
#c8 {
width: 100px;
height: 75px;
left: 50px;
top: 50px;
z-index: 3;
}
#c9 {
width: 150px;
height: 113px;
left: 100px;
top: 100px;
z-index: 4;
}
.carousel_link {
width: 95%;
max-width: 500px;
font-size: 20px;
position: relative;
margin: 7px auto 0 auto;
}
.carousel_link a {
color: #666;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
.carousel_link a:hover, .carousel_link a.active {
color: #333;
}
#move_back {
position: absolute;
left: 0;
top: 0;
}
#move_next {
position: absolute;
right: 0;
top: 0;
}
.carousel_link2 {
margin: 0 auto;
}
.carousel_link2 a {
margin: 0 10px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<script src="jquery.acarousel.min.js"></script>
<script>
$(function () {
var acarousel = null;
acarousel = $("#carousel").acarousel({
moveStep: function () {
if (acarousel != null) changeActive();
}
});
changeActive();
$("#move_back").click(function () {
acarousel.move(1);
return false;
});
$("#move_next").click(function () {
acarousel.move(-1);
return false;
});
$("#carousel li a").click(function () {
acarousel.moveByElem($(this).parent());
return false;
});
$(".move").click(function () {
var index = $(".move").index(this);
acarousel.moveByIndex(index);
return false;
});
$("#slide_back").click(function () {
acarousel.slide(1000);
return false;
});
$("#slide_next").click(function () {
acarousel.slide(-1000);
return false;
});
$("#slide_stop").click(function () {
acarousel.stop();
return false;
});
$("#carousel_container").swipe({
allowPageScroll: "vertical"
, swipeStatus: function (event, phase, direction, distance, duration, fingerCount) {
if (phase == "start" || phase == "move") return;
if (direction == "left") {
acarousel.move(-1);
} else if (direction == "right") {
acarousel.move(1);
}
}
});
function changeActive() {
var index = acarousel.getPos().index;
$(".move").removeClass("active").eq(index).addClass("active");
}
$(window).resize(function () {
var parent = $("#carousel_container");
var self = $("#carousel");
self.css({
left: parent.width() / 2 - self.width() / 2
, top: parent.height() / 2 - self.height() / 2
});
}).trigger("resize");
$("a[href^='#']").click(function () {
var target = $($(this).attr("href"));
if (target.length == 0) return true;
$("html, body").stop().animate({scrollTop: target.offset().top});
return false;
});
});
</script>
</head>
<body>
<div id="header">
<div id="header_sub">
<div id="title">acarousel</div>
<div id="header_button">
<div id="header_button_sub">
<div id="download"><a href="jquery.acarousel.min.js">download</a></div>
<div><a href="#demo">demo</a></div>
<div><a href="#docs">docs</a></div>
</div>
</div>
<div id="title_sub">API形式に特化したjQueryカルーセルプラグイン</div>
</div>
</div>
<div id="content">
<div class="content_sub center">
<div id="carousel_container">
<ul id="carousel">
<li id="c1"><a href="#"><img src="img1.jpg"></a></li>
<li id="c2"><a href="#"><img src="img2.jpg"></a></li>
<li id="c3"><a href="#"><img src="img3.jpg"></a></li>
<li id="c4"><a href="#"><img src="img4.jpg"></a></li>
<li id="c5"><a href="#"><img src="img5.jpg"></a></li>
<li id="c6"><a href="#"><img src="img6.jpg"></a></li>
<li id="c7"><a href="#"><img src="img7.jpg"></a></li>
<li id="c8"><a href="#"><img src="img8.jpg"></a></li>
<li id="c9"><a href="#"><img src="img9.jpg"></a></li>
</ul>
</div>
<div class="carousel_link">
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a id="move_back" href="#">←</a>
<a id="move_next" href="#">→</a>
</div>
<div class="carousel_link carousel_link2">
<a id="slide_back" href="#"><<</a>
<a id="slide_stop" href="#">停止</a>
<a id="slide_next" href="#">>></a>
</div>
</div>
<div class="content_sub">
<h1>特徴</h1>
<ul class="feature">
<li>API形式でアニメーションが可能。</li>
<li>API形式のため、矢印ボタンの設置や要素クリックによる動作等は各自自由に行える。</li>
<li>最小限のスタイル変更しか行わないので、作成済みのスタイルをそのまま適用可能。</li>
<li>各要素はスタイルシートで設定した位置をそのまま利用可能。</li>
<li>Chrome、Firefox、IE6+等のブラウザ、スマートフォンで動作。</li>
</ul>
</div>
<div id="demo" class="content_sub">
<h1>動作例</h1>
<ol class="feature">
<li><a href="demo1.html">基本</a></li>
<li><a href="demo2.html">応用例</a></li>
</ul>
</div>
<div id="docs" class="content_sub">
<h1>ドキュメント</h1>
<h2>使い方</h2>
<div class="document_last">
以下のように記述し、jQueryとacarouselを読み込んで特定の要素をスライド化します。
<div class="code">
<script src=<span class="quote">"(jQuery本体のパス)"</span>></script><br>
<script src=<span class="quote">"jquery.acarousel.min.js"</span>></script><br>
<script><br>
$(<span class="op">function</span>() {<br>
<span class="comment">// #carouselに対してカルーセル化を実行</span><br>
<span class="op">var</span> acarousel1 = $(<span class="quote">"#carousel"</span>).acarousel();<br>
});<br>
</script><br>
</div>
上記のコードの場合、HTMLは以下のようにブロック要素で囲みます。
<div class="code">
<ul id=<span class="quote">"carousel"</span>><br>
<li>1つ目の要素</li><br>
<li>2つ目の要素</li><br>
<li>3つ目の要素</li><br>
<li>4つ目の要素</li><br>
<li>5つ目の要素</li><br>
</ul><br>
</div>
メソッドチェーンではありませんのでご注意ください。
</div>
<h2>コンストラクター</h2>
<div class="document_last">
<div class="property"><span class="name">acarousel</span> <span class="arg">(<span class="type">object</span> option)</span>: object</div>
指定した要素をカルーセル化し、各メソッドが実行できるobjectを返します。引数optionに下記オプションを指定できます(各オプションはそれぞれ省略可)。
<div class="code">
<span class="op">var</span> acarousel1 = $(<span class="quote">"#carousel"</span>).acarousel();
</div>
<br>
一度に指定できる要素は1つまでです。
<div class="code">
<span class="comment">// 1つ目の要素に対してのみカルーセル化されます</span><br>
<span class="comment">// つまり、.carouselsの2つ目以降の要素と#carouselは無視されます</span><br>
<span class="op">var</span> acarousel = $(<span class="quote">".carousels, #carousel"</span>).acarousel();<br>
<br>
<span class="comment">// それぞれの要素に対してカルーセル化させる場合は以下のようにします</span><br>
<span class="op">var</span> acarousel1 = $(<span class="quote">".carousels"</span>).eq(0).acarousel();<br>
<span class="op">var</span> acarousel2 = $(<span class="quote">".carousels"</span>).eq(1).acarousel();<br>
<span class="op">var</span> acarousel3 = $(<span class="quote">"#carousel"</span>).acarousel();<br>
</div>
</div>
<h2>オプション</h2>
<div class="document">
<div class="property"><span class="name">move_minimum</span>: boolean (default=false)</div>
移動量を最小にするか指定します。<br>
trueにするとmoveメソッドの引数move_posに大きな値を指定してもループしません。
</div>
<div class="document">
<div class="property"><span class="name">moveBefore</span>: function (default=function () {})</div>
アニメーション前に実行するコールバック関数を指定します。
</div>
<div class="document">
<div class="property"><span class="name">moveStep</span>: function (default=function (elem, index, pos_index, t) {})</div>
アニメーション中の毎フレーム実行するコールバック関数を指定します。実行される回数は(毎フレーム)×(カルーセル化した要素数)となります。<br>
コンストラクター時にもカルーセル化した要素分実行されますのでご注意ください。<br>
引数elemはアニメーションするjQuery Objectが設定されます。<br>
引数indexはアニメーションする要素のインデックスが設定されます。<br>
引数pos_indexはアニメーションする要素の現在位置が設定されます。<br>
引数tはアニメーションする要素の現在位置からの進行度(0～1)が設定されます。
</div>
<div class="document_last">
<div class="property"><span class="name">moveAfter</span>: function (default=function () {})</div>
アニメーション後に実行するコールバック関数を指定します。<br>
slideメソッドでは呼ばれません。
</div>
<h2>メソッド、プロパティ</h2>
<div class="document">
<div class="property"><span class="name">option</span></div>
上記オプションを参照できます。変更も可。
</div>
<div class="document">
<div class="property"><span class="name">init</span> <span class="arg">()</span></div>
初期化を行い、表示を更新します。<br>
要素の数が変更された場合等に実行するとよいでしょう。
</div>
<div class="document">
<div class="property"><span class="name">move</span> <span class="arg">(<span class="type">float</span> move_pos, <span class="type">mixed</span> duration, <span class="type">string</span> easing)</span> : float</div>
アニメーションを実行し、移動数を返します。小数点含めて指定できます。例えば1.5と指定すると1.5個分動きます。<br>
引数move_posに移動する数を指定します。負の値も指定できます。<br>
引数duration、easingはjQueryと同様の方法で指定できます。<br>
既にアニメーション中の場合、そのアニメーションを停止させてから実行します。
</div>
<div class="document">
<div class="property"><span class="name">moveByIndex</span> <span class="arg">(<span class="type">integer</span> index, <span class="type">mixed</span> duration, <span class="type">string</span> easing)</span> : float</div>
アニメーションを実行し、移動数を返します。<br>
動かす数は引数indexで指定した要素インデックスにより決定されます。<br>
内部ではmoveメソッドが呼ばれます。
</div>
<div class="document">
<div class="property"><span class="name">moveByElem</span> <span class="arg">(<span class="type">object</span> elem, <span class="type">mixed</span> duration, <span class="type">string</span> easing)</span> : float</div>
アニメーションを実行し、移動数を返します。<br>
動かす数は引数elemで指定した要素により決定されます。引数elemはカルーセル化した要素である必要があります。<br>
内部ではmoveメソッドが呼ばれます。
</div>
<div class="document">
<div class="property"><span class="name">slide</span> <span class="arg">(<span class="type">integer</span> duration)</span></div>
常時動くタイプのスライドアニメーションを実行します。<br>
要素1つ分の移動量を引数durationで指定します。負の値も指定できます。<br>
既にアニメーション中の場合、そのアニメーションを停止させてから実行します。
</div>
<div class="document">
<div class="property"><span class="name">stop</span> <span class="arg">()</span></div>
アニメーションを停止します。
</div>
<div class="document">
<div class="property"><span class="name">isAnim</span> <span class="arg">()</span> : boolean</div>
アニメーション中ならtrueを、停止状態ならfalseを返します。<br>
</div>
<div class="document">
<div class="property"><span class="name">count</span> <span class="arg">()</span> : integer</div>
要素の数を取得します。
</div>
<div class="document">
<div class="property"><span class="name">getPos</span> <span class="arg">(<span class="type">integer</span> offset)</span> : object</div>
現在の位置情報を返します。<br>
<span class="op">index:</span> 要素インデックス<br>
<span class="op">point:</span> 次の要素までの進行度(0～1未満)<br>
引数offsetを指定すると現在位置から引数offsetだけ動かした分のインデックスを返します。
</div>
</div>
<div class="content_sub">
<h1>制限等</h1>
<ul class="feature">
<li>原則、各要素のサイズや絶対指定で位置を設定をしておく必要があります。</li>
<li>別のプラグイン等で外部から要素を操作すると正しく動作しない場合があります。</li>
</ul>
<div id="pad"></div>
</div>
</div>
</body>
</html>