質問編集履歴

1

ファイル追加

2016/08/20 10:09

投稿

退会済みユーザー
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
+ ```