質問編集履歴
1
ファイル追加
test
CHANGED
File without changes
|
test
CHANGED
@@ -215,3 +215,131 @@
|
|
215
215
|
|
216
216
|
|
217
217
|
```
|
218
|
+
|
219
|
+
|
220
|
+
|
221
|
+
```javascript
|
222
|
+
|
223
|
+
$(function(){
|
224
|
+
|
225
|
+
// スクロールの方向 -1の時には左、1の時には右
|
226
|
+
|
227
|
+
var dir = -1;
|
228
|
+
|
229
|
+
|
230
|
+
|
231
|
+
// スクロールのインターバル(何秒ごとにスクロールさせるか。3000ミリ秒に設定)
|
232
|
+
|
233
|
+
var interval = 3000;
|
234
|
+
|
235
|
+
|
236
|
+
|
237
|
+
// スクロールのスピード(700ミリ秒に設定)
|
238
|
+
|
239
|
+
var duration = 700;
|
240
|
+
|
241
|
+
|
242
|
+
|
243
|
+
// タイマー用の変数
|
244
|
+
|
245
|
+
var timer;
|
246
|
+
|
247
|
+
|
248
|
+
|
249
|
+
// リストの順番を変更(3番目を1番最初にする)
|
250
|
+
|
251
|
+
$("#slide ul").prepend($("#slide li:last-child"));
|
252
|
+
|
253
|
+
|
254
|
+
|
255
|
+
// リストの位置を変更(画像1枚分ずらす)
|
256
|
+
|
257
|
+
$("#slide ul").css("left", -500);
|
258
|
+
|
259
|
+
|
260
|
+
|
261
|
+
// SlideTimer();
|
262
|
+
|
263
|
+
timer = setInterval(slideTimer, interval);
|
264
|
+
|
265
|
+
|
266
|
+
|
267
|
+
function slideTimer(){
|
268
|
+
|
269
|
+
if(dir == -1){
|
270
|
+
|
271
|
+
$("#slide ul").animate({"left" : "-=500px" }, duration, function(){
|
272
|
+
|
273
|
+
$(this).append($("#slide li:first-child"));
|
274
|
+
|
275
|
+
$(this).css("left", -500);
|
276
|
+
|
277
|
+
});
|
278
|
+
|
279
|
+
}else{
|
280
|
+
|
281
|
+
$("#slide ul").animate({"left" : "+=500px" }, duration, function(){
|
282
|
+
|
283
|
+
$(this).prepend($("#slide li:last-child"));
|
284
|
+
|
285
|
+
$(this).css("left", -500);
|
286
|
+
|
287
|
+
dir = -1;
|
288
|
+
|
289
|
+
});
|
290
|
+
|
291
|
+
}
|
292
|
+
|
293
|
+
}
|
294
|
+
|
295
|
+
|
296
|
+
|
297
|
+
// 前へボタン
|
298
|
+
|
299
|
+
$("#prevBtn").click(function(){
|
300
|
+
|
301
|
+
// スクロール方向の切り替え(右)
|
302
|
+
|
303
|
+
dir = 1;
|
304
|
+
|
305
|
+
|
306
|
+
|
307
|
+
// タイマーを停止して再スタート
|
308
|
+
|
309
|
+
clearInterval(timer);
|
310
|
+
|
311
|
+
timer = setInterval(slideTimer, interval);
|
312
|
+
|
313
|
+
|
314
|
+
|
315
|
+
// 初回の関数実行
|
316
|
+
|
317
|
+
slideTimer();
|
318
|
+
|
319
|
+
});
|
320
|
+
|
321
|
+
|
322
|
+
|
323
|
+
// 次へボタン
|
324
|
+
|
325
|
+
$("#nextBtn").click(function(){
|
326
|
+
|
327
|
+
// スクロール方向の切り替え(左)
|
328
|
+
|
329
|
+
dir = -1;
|
330
|
+
|
331
|
+
clearInterval(timer);
|
332
|
+
|
333
|
+
timer = setInterval(slideTimer, interval);
|
334
|
+
|
335
|
+
|
336
|
+
|
337
|
+
slideTimer();
|
338
|
+
|
339
|
+
});
|
340
|
+
|
341
|
+
});
|
342
|
+
|
343
|
+
|
344
|
+
|
345
|
+
```
|