質問編集履歴

1

内容、質問内容を具体的にしました。

2020/05/03 09:12

投稿

blue1412
blue1412

スコア3

test CHANGED
@@ -1 +1 @@
1
- javascript スライダー
1
+ javascript スライダーのif 文について聞きたいです。
test CHANGED
@@ -1,3 +1,133 @@
1
+ 以下のコードをを見てアドバイス願います。
2
+
3
+
4
+
5
+ javascriptのことなのですが、
6
+
7
+
8
+
9
+ 具体的に言うと
10
+
11
+ var isChanging = false;
12
+
13
+ このコードで定義された変数を直後の
14
+
15
+ if (isChanging === true)
16
+
17
+ という文ですが、
18
+
19
+ isChangingはfalseです!!って言った後に、
20
+
21
+ もしtrueなら、、、となるのが、理解できません。
22
+
23
+
24
+
25
+ 例えるなら、ミステリー小説で犯人はAさんでない!!家族で夕食を食べていたというアリバイがあって家族もそれを証言し不審な点もないからだ。と言った後に、もしそのアリバイがなく、犯人になりえるとしたら、、、
26
+
27
+ みたいに一度確定したことを、もし~~~ならとなっているのが理解できません。
28
+
29
+
30
+
31
+ 質問の意図はわかっていただけましたでしょうか?
32
+
33
+ 足りない点がありましたら、指摘お願いします。
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+
42
+
43
+ ```javascript
44
+
45
+ // スライダーに表示する画像のパス
46
+
47
+ var imgList = [
48
+
49
+ "images/img01.jpg",
50
+
51
+ "images/img02.jpg",
52
+
53
+ "images/img03.jpg",
54
+
55
+ "images/img04.jpg"
56
+
57
+ ];
58
+
59
+
60
+
61
+ // 画像とナビの要素を自動で追加
62
+
63
+ for(var i = 0; i < imgList.length; i++) {
64
+
65
+ // li要素を取得
66
+
67
+ var slide = document.createElement("li");
68
+
69
+ // li要素の中に画像タグを埋め込む
70
+
71
+ slide.innerHTML = "<img src='" + imgList[i] + "'>";
72
+
73
+ // li要素をクラス名「slider-inner」の子要素として追加
74
+
75
+ document.getElementsByClassName("slider-inner")[0].appendChild(slide);
76
+
77
+
78
+
79
+ // li要素を取得
80
+
81
+ var nav = document.createElement("li");
82
+
83
+ // プロパティ「data-nav-index」に数値を割り振る
84
+
85
+ nav.setAttribute("data-nav-index", i);
86
+
87
+ // li要素をクラス名「nav」の子要素として追加
88
+
89
+ document.getElementsByClassName("nav")[0].appendChild(nav);
90
+
91
+ }
92
+
93
+
94
+
95
+ // スライドの数を取得(処理のために-1する)
96
+
97
+ var length = imgList.length - 1;
98
+
99
+ // クラス名「imageSlide」に画像の1枚の要素を格納
100
+
101
+ var imageSlide = document.getElementsByClassName("slider-inner")[0].getElementsByTagName("li");
102
+
103
+ // クラス名「dotNavigation」にドットナビの1つの要素を格納
104
+
105
+ var dotNavigation = document.getElementsByClassName("nav")[0].getElementsByTagName("li");
106
+
107
+ // 「現在○○枚目のスライドを表示している」というインデックス番号を格納する変数
108
+
109
+ var nowIndex = 0;
110
+
111
+ // 現在表示されている画像とドットナビにクラス名を付ける
112
+
113
+ imageSlide[nowIndex].classList.add("show");
114
+
115
+ dotNavigation[nowIndex].classList.add("current");
116
+
117
+
118
+
119
+
120
+
121
+
122
+
123
+ //見ていただきたいところです
124
+
125
+
126
+
127
+
128
+
129
+
130
+
1
131
  // スライドがアニメーション中か判断するフラグ
2
132
 
3
133
  var isChanging = false;
@@ -44,37 +174,57 @@
44
174
 
45
175
 
46
176
 
47
-
48
-
49
- コードで
177
+ // 左矢印ナビをクリックした時のイベント
178
+
50
-
179
+ document.getElementById("arrow-prev").addEventListener("click", function(){
180
+
51
- var ischanging = false;
181
+ var index = nowIndex - 1;
182
+
52
-
183
+ if(index < 0){
184
+
53
- という変数が決まっている直後に
185
+ index = length;
186
+
54
-
187
+ }
188
+
55
-
189
+ sliderSlide(index);
56
-
190
+
57
- if文で
191
+ }, false);
192
+
58
-
193
+ // 右矢印のナビをクリックした時のイベント
194
+
195
+ document.getElementById("arrow-next").addEventListener("click", function(){
196
+
197
+ var index = nowIndex + 1;
198
+
59
- もしischangingtrue なら...
199
+ if(index > length){
60
-
200
+
61
- ということになるのですか?
201
+ index = 0;
62
-
63
-
64
-
202
+
65
- つまりは
203
+ }
66
-
67
- 定義した変数の後にもし~~~なら
204
+
68
-
69
- という風になるのが意味わからないです。
205
+ sliderSlide(index);
206
+
70
-
207
+ }, false);
208
+
209
+ // ドットナビをクリックした時のイベントを作成
210
+
211
+ for(var i = 0; i < dotNavigation.length; i++) {
212
+
71
- 辺陬ischangingは再定義されなきゃfalse じゃないんですか?
213
+ // データ属性のインデックス番号を元にスライドを行う
214
+
72
-
215
+ dotNavigation[i].addEventListener("click", function(){
216
+
217
+ var index = Number(this.getAttribute("data-nav-index"));
218
+
219
+ sliderSlide(index);
220
+
221
+ }, false);
222
+
223
+ }
224
+
225
+ ```
226
+
73
- 教えてください。
227
+ ```html
74
-
75
- 一応すべてのコードを書いときます
76
-
77
-
78
228
 
79
229
  // スライダーに表示する画像のパス
80
230
 
@@ -241,3 +391,413 @@
241
391
  }, false);
242
392
 
243
393
  }
394
+
395
+ ```
396
+
397
+ ```css
398
+
399
+ .slider {
400
+
401
+ position: relative;
402
+
403
+ width: 640px;
404
+
405
+ height: 480px;
406
+
407
+ margin: 0 auto
408
+
409
+ }
410
+
411
+
412
+
413
+ .slider .slider-inner {
414
+
415
+ position: relative;
416
+
417
+ top: 0;
418
+
419
+ left: 0;
420
+
421
+ width: 100%;
422
+
423
+ height: 100%
424
+
425
+ }
426
+
427
+
428
+
429
+ .slider .slider-inner li {
430
+
431
+ position: absolute;
432
+
433
+ top: 0;
434
+
435
+ left: 0;
436
+
437
+ width: 100%;
438
+
439
+ height: 100%;
440
+
441
+ opacity: 0;
442
+
443
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
444
+
445
+ -webkit-transition: all 600ms;
446
+
447
+ transition: all 600ms;
448
+
449
+ pointer-events: none
450
+
451
+ }
452
+
453
+
454
+
455
+ .slider .slider-inner li.show {
456
+
457
+ opacity: 1;
458
+
459
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
460
+
461
+ z-index: 1;
462
+
463
+ pointer-events: auto
464
+
465
+ }
466
+
467
+
468
+
469
+ .slider .nav {
470
+
471
+ width: 100%;
472
+
473
+ margin-top: 20px;
474
+
475
+ text-align: center;
476
+
477
+ font-size: 0
478
+
479
+ }
480
+
481
+
482
+
483
+ .slider .nav li {
484
+
485
+ display: inline-block;
486
+
487
+ width: 15px;
488
+
489
+ height: 15px;
490
+
491
+ margin: 0 5px;
492
+
493
+ border-radius: 15px;
494
+
495
+ background: #ddd;
496
+
497
+ cursor: pointer;
498
+
499
+ -webkit-transition: background 400ms;
500
+
501
+ transition: background 400ms
502
+
503
+ }
504
+
505
+
506
+
507
+ .slider .nav li:hover {
508
+
509
+ background: #aaa
510
+
511
+ }
512
+
513
+
514
+
515
+ .slider .nav li.current {
516
+
517
+ background: #aaa
518
+
519
+ }
520
+
521
+
522
+
523
+ .slider .arrow {
524
+
525
+ position: absolute;
526
+
527
+ top: 50%;
528
+
529
+ font-size: 20px;
530
+
531
+ cursor: pointer;
532
+
533
+ width: 20px;
534
+
535
+ height: 40px;
536
+
537
+ background: #000;
538
+
539
+ color: #fff;
540
+
541
+ line-height: 40px;
542
+
543
+ padding: 5px;
544
+
545
+ -webkit-transition: opacity 400ms;
546
+
547
+ transition: opacity 400ms
548
+
549
+ }
550
+
551
+
552
+
553
+ .slider .arrow:hover {
554
+
555
+ opacity: .7;
556
+
557
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"
558
+
559
+ }
560
+
561
+
562
+
563
+ .slider .arrow#arrow-prev {
564
+
565
+ left: 0;
566
+
567
+ -webkit-transform: translate(-100%,-50%);
568
+
569
+ transform: translate(-100%,-50%)
570
+
571
+ }
572
+
573
+
574
+
575
+ .slider .arrow#arrow-next {
576
+
577
+ right: 0;
578
+
579
+ -webkit-transform: translate(100%,-50%);
580
+
581
+ transform: translate(100%,-50%)
582
+
583
+ }
584
+
585
+ ```
586
+
587
+ ```css
588
+
589
+ @charset "utf-8";
590
+
591
+ /*
592
+
593
+ html5doctor.com Reset Stylesheet
594
+
595
+ v1.6.1
596
+
597
+ Last Updated: 2010-09-17
598
+
599
+ Author: Richard Clark - http://richclarkdesign.com
600
+
601
+ Twitter: @rich_clark
602
+
603
+ */
604
+
605
+ html, body, div, span, object, iframe,
606
+
607
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
608
+
609
+ abbr, address, cite, code,
610
+
611
+ del, dfn, em, img, ins, kbd, q, samp,
612
+
613
+ small, strong, sub, sup, var,
614
+
615
+ b, i,
616
+
617
+ dl, dt, dd, ol, ul, li,
618
+
619
+ fieldset, form, label, legend,
620
+
621
+ table, caption, tbody, tfoot, thead, tr, th, td,
622
+
623
+ article, aside, canvas, details, figcaption, figure,
624
+
625
+ footer, header, hgroup, menu, nav, section, summary,
626
+
627
+ time, mark, audio, video {
628
+
629
+ margin: 0;
630
+
631
+ padding: 0;
632
+
633
+ border: 0;
634
+
635
+ outline: 0;
636
+
637
+ font-size: 100%;
638
+
639
+ vertical-align: baseline;
640
+
641
+ background: transparent;
642
+
643
+ }
644
+
645
+
646
+
647
+ body {
648
+
649
+ line-height: 1;
650
+
651
+ }
652
+
653
+
654
+
655
+ article, aside, details, figcaption, figure,
656
+
657
+ footer, header, hgroup, menu, nav, section {
658
+
659
+ display: block;
660
+
661
+ }
662
+
663
+
664
+
665
+ nav ul {
666
+
667
+ list-style: none;
668
+
669
+ }
670
+
671
+
672
+
673
+ ul li {
674
+
675
+ list-style-type: none;
676
+
677
+ }
678
+
679
+
680
+
681
+ blockquote, q {
682
+
683
+ quotes: none;
684
+
685
+ }
686
+
687
+
688
+
689
+ blockquote:before, blockquote:after,
690
+
691
+ q:before, q:after {
692
+
693
+ content: '';
694
+
695
+ content: none;
696
+
697
+ }
698
+
699
+
700
+
701
+ a {
702
+
703
+ margin: 0;
704
+
705
+ padding: 0;
706
+
707
+ font-size: 100%;
708
+
709
+ vertical-align: baseline;
710
+
711
+ background: transparent;
712
+
713
+ }
714
+
715
+
716
+
717
+ /* change colours to suit your needs */
718
+
719
+ ins {
720
+
721
+ background-color: #ff9;
722
+
723
+ color: #000;
724
+
725
+ text-decoration: none;
726
+
727
+ }
728
+
729
+
730
+
731
+ /* change colours to suit your needs */
732
+
733
+ mark {
734
+
735
+ background-color: #ff9;
736
+
737
+ color: #000;
738
+
739
+ font-style: italic;
740
+
741
+ font-weight: bold;
742
+
743
+ }
744
+
745
+
746
+
747
+ del {
748
+
749
+ text-decoration: line-through;
750
+
751
+ }
752
+
753
+
754
+
755
+ abbr[title], dfn[title] {
756
+
757
+ border-bottom: 1px dotted;
758
+
759
+ cursor: help;
760
+
761
+ }
762
+
763
+
764
+
765
+ table {
766
+
767
+ border-collapse: collapse;
768
+
769
+ border-spacing: 0;
770
+
771
+ }
772
+
773
+
774
+
775
+ /* change border colour to suit your needs */
776
+
777
+ hr {
778
+
779
+ display: block;
780
+
781
+ height: 1px;
782
+
783
+ border: 0;
784
+
785
+ border-top: 1px solid #cccccc;
786
+
787
+ margin: 1em 0;
788
+
789
+ padding: 0;
790
+
791
+ }
792
+
793
+
794
+
795
+ input, select {
796
+
797
+ vertical-align: middle;
798
+
799
+ }
800
+
801
+
802
+
803
+ ```