質問編集履歴

1

動作するコードを追記

2019/12/07 02:08

投稿

削除済ユーザー
test CHANGED
File without changes
test CHANGED
@@ -349,167 +349,3 @@
349
349
  .slider-ctrl-btn.next { right: 30px; }
350
350
 
351
351
  ```
352
-
353
-
354
-
355
- 動作するコードが以下のコードです。
356
-
357
- ```html
358
-
359
- <!doctype html>
360
-
361
- <html>
362
-
363
- <head>
364
-
365
- <meta charset="UTF-8">
366
-
367
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
368
-
369
- <meta name="format-detection" content="telephone=no">
370
-
371
- <title></title>
372
-
373
- <link rel="stylesheet" href="css/reset.css">
374
-
375
- <link rel="stylesheet" href="css/base.css">
376
-
377
- <link rel="stylesheet" href="css/style.css">
378
-
379
- </head>
380
-
381
- <body>
382
-
383
- <div class="wrapper">
384
-
385
- <div class="slider-wrap">
386
-
387
- <div class="slider-area">
388
-
389
- <ul class="slider-list clearfix">
390
-
391
- <li><img src="img/1.jpg" alt=""></li>
392
-
393
- <li><img src="img/2.jpg" alt=""></li>
394
-
395
- <li><img src="img/3.jpg" alt=""></li>
396
-
397
- <li><img src="img/4.jpg" alt=""></li>
398
-
399
- </ul>
400
-
401
- <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button>
402
-
403
- <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button>
404
-
405
- </div>
406
-
407
- </div>
408
-
409
- </div>
410
-
411
- <script type="text/javascript" src="js/jquery.js"></script>
412
-
413
- <script type="text/javascript">
414
-
415
- /**
416
-
417
- * (説明)
418
-
419
- * @type {number} current ←クリックしたときの初期値
420
-
421
- * @type {number} num ←要素の幅を取得した後に幅の数値を入れる変数
422
-
423
- * @type {string} numLength ←画像の位置情報を取得するための要素の個数
424
-
425
- * @type {number} numWidth ←要素の幅
426
-
427
- *
428
-
429
- * (関数)
430
-
431
- * @param {flg} flg : flg
432
-
433
- **/
434
-
435
- $(function(){
436
-
437
- var current=0;
438
-
439
- var num=0;
440
-
441
- $('.next').on('click',function(){
442
-
443
- slider(1);
444
-
445
- });
446
-
447
- $('.prev').on('click',function(){
448
-
449
- slider(2);
450
-
451
- });
452
-
453
- function slider(flg){
454
-
455
- if(flg==1){
456
-
457
- var numWidth=$('.slider-list img').eq(current).width();
458
-
459
- var numLength=$('.slider-list img').length;
460
-
461
- current++;
462
-
463
- if(current<numLength){
464
-
465
- num-=numWidth;
466
-
467
- }else{
468
-
469
- num=0;
470
-
471
- current=0;
472
-
473
- }
474
-
475
- $('.slider-list').animate({left:num});
476
-
477
- }else if(flg==2){
478
-
479
- var numWidth=$('.slider-list img').eq(current).width();
480
-
481
- var numLength=$('.slider-list img').length;
482
-
483
- current--;
484
-
485
- if(current>=0){
486
-
487
- num+=numWidth;
488
-
489
- }else{
490
-
491
- num=-$('.slider-list img:not(:last)').map(function(){
492
-
493
- return $(this).width();
494
-
495
- }).get().reduce((x,y)=>x+y);
496
-
497
- current=numLength-1;
498
-
499
- }
500
-
501
- $('.slider-list').animate({left:num});
502
-
503
- }
504
-
505
- }
506
-
507
- });
508
-
509
- </script>
510
-
511
- </body>
512
-
513
- </html>
514
-
515
- ```