スライドショーの丸いボタンを横並びにする方法とボタンをクリックしたときに表示されてる画像のボタンの色を変えたい。

javascript初心者です。今回解決してほしいことはタイトルに述べてあるように、

ボタンの配列が縦のままなので横にするにはどうしたらいいのかという問題と、

クリックしたときにボタンの色が変化しないという問題です。

コードは以下の通りです。

HTML
1```<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8  <title>Document</title>
9  <link rel="stylesheet" href="css/style.css">
10</head>
11<body>
12  <div id="slide">
13    <ul>
14      <li><img src="images/otaria.JPG" width="1000" height="500" alt="img1"></li>
15      <li><img src="images/monkey.JPG" width="1000" heigt="500" alt="img2"></li>
16      <li><img src="images/warabi.JPG" width="1000" height="500" alt="img3"></li>
17    </ul>
18  </div>
19
20  <div id="button">
21    <ul>
22      <li><a href="#" class="target">1</a></li>
23      <li><a href="#">2</a></li>
24      <li><a href="#">3</a></li>
25    </ul>
26  </div>
27
28  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
29  <script src="js/script.js"></script>
30</body>
31
32</html>
33
34```CSS3
35
36コード
37```#slide ul {
38    position: relative;
39}
40
41#slide li {
42    position: absolute;
43    width: 100%;
44}
45
46#button ul li a {
47    text-indent: -9999px;
48    text-decoration: none;
49    display: block;
50    width: 14px;
51    height: 14px;
52    border-radius: 7px;
53    background: #b2d8d4;
54}
55
56#button .target {
57    &:active {
58        background: #000000;
59    }
60}
61
62```javascript
63
64コード
65```$(function(){
66
67    var count = $("#slide li").length;
68
69    var current = 1;
70
71    var next = 2;
72
73    var interval = 3000;
74
75    var duration = 1300;
76
77    var timer;
78
79    $("#slide li:not(:first-child)").hide();
80
81    timer = setInterval(slideTimer, interval);
82
83    function slideTimer(){
84
85        $("#slide li:nth-child(+" + current + ")").fadeOut(duration);
86
87        $("#slide li:nth-child(+" + next + ")").fadeIn(duration);
88
89        current = next;
90
91        next = ++next;
92
93        if(next > count) {
94
95            next = 1;
96
97        }
98
99        $("#button li a").removeClass("target");
100
101        $("#button li:nth-child("+ current +") a")
102
103        .addClass("target");
104
105    }
106
107    $("#button li a").click(function(){
108
109        next = $(this).html();
110
111        clearInterval(timer);
112
113        timer = setInterval(slideTimer, interval);
114
115        slideTimer();
116
117        return false;
118
119    });
120
121});
122
123```ここに言語を入力
124コード

azuapricot

2019/01/28 05:37 編集

コードが恐ろしく読みにくいのですが、インデントには興味がないのでしょうか。コーディングする側ならばインデントは超重要なのですが・・・。

azuapricot

2019/01/28 05:41

あとjavascript実際に見てみましたけど最後の　}); 　いらなかったですよ。インデントしっかりしてればこんなミスしないはずなんですが・・・。

azuapricot

2019/01/28 05:43

CSSも上のほうたりなくないですか？ position: relative; } なんですかこれ

行動規範の内容に同意します

回答1件

ベストアンサー

横並びにするだけなら

#buttonにdisplay: flex;
#button liにinline-block
#button liにfloat（clear忘れずに）

などで解決します。

あとは、

$("#slide li:nth-child(+" + current + ")").fadeOut(duration);

と同じ要領で、n番目に「.current」つける（その前に「.current」ついていれば外す）を処理すればOKだと思います。

投稿2019/01/28 05:44

編集2019/01/28 05:48

kszk311

総合スコア3404

dream

2019/01/28 07:49

お返事ありがとうございます。おかげさまで、横並びにできました！もう少し聞きたいのですが、.currentには変化後の色をcssで設定しておくべきでしょうか？

dream

2019/01/28 10:23

条件文としてはこんな感じでしょうか？ $("#button li a").removeClass("target"); $("#button li:nth-child("+ current +") a") .addClass("target"); targetは回答者さんのおっしゃる.currentと同義です。