横に移り変わるスライドショー

JavaScriptで横に移り変わるスライドショーのプログラムを作ってhtmlに入れてプラウザーで確認したらscriptの55がエラー表示が出ています。エラー内容はUnexpected tokenて言うの出ています。
誰か助けて下さい。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <meta name="keywords" content="ベネヴィータ王慈のホームページ">
6    <meta name="description" content="ベネヴィータ王慈のホームページです。">
7    <link rel="stylesheet" type="text/css" href="ベネヴィータ王慈のホームページ.css">
8    <link rel="next" crossorigin="use-credentials" href="障がい者支援施設 ベネヴィータ王慈.html 地域密着型特別養護老人ホーム ベネヴィータ王慈.html 障がい児通所支援 地域生活支援 エンゼルきっず.html">
9    <title>ベネウィータ王慈のホームページ</title>
10  </head>
11  <body>
12    <div class="i">
13    <a class="b" href="ベネヴィータ王慈のホームページ.html">ベネヴィータ王慈のホームページ</a>
14  </div>
15    <p/>
16  <div class="wa">
17  <div id="slide">
18    <a href="障がい者支援施設 ベネヴィータ王慈.html"><img src="hp/ap.jpg" alt="" class="r1"></a>
19    <a href="地域密着型特別養護老人ホーム ベネヴィータ王慈.html"><img src="hp/花見0405 (5).JPG" alt="" class="r2"></a>
20    <a href="障がい児通所支援・地域生活支援 エンゼルきっず.html"><img src="hp/花見0405 (61).JPG" alt="" class="r3"></a>
21    <a href="ベネヴィータ王慈へのアクセス.html"><img src="hp/花見0405 (6).JPG" alt="" class="r4"></a>
22    <a href="ベネヴィータ王慈のホームページ (行事).html"><img src="hp/忘年会1228 (277).JPG" alt="" class="r5"></a>
23  </div>
24  </div>
25  <div class="tx">
26    <p><a href="#ne">法人の理念</a>と<a href="#vi">ベネヴィータの意味</a>は？</p>
27    <section class="be">
28      <p id="ne">こころゆたかに すこやかに</p>
29      <p class="be">私たち王慈福祉会の使命は、ご利用者、地域の方々そして働く職員が生活していく上で価値あるものでなければならないと考えています。私たち王慈福祉会は、お一人おひとりの尊厳、ニーズや権利に対する思いを心に刻み、暖かで和やかな空間、心の拠り所を整備し、誰もが幸せになれるよう、笑顔や心のこもった高水準のサービスの提供を心がけています。<br>
30      私たちの高齢者や障がい者、児童のための高品質な支援・サービスが、地域の方から最初に選ばれる存在であり続けたいと常に願っています。<br>
31      ご利用される皆さんの権利の尊重、倫理綱領につきましては、こちらに掲載しております。<br></p>
32      <p id="vi">ベネヴィータの意味とは？</p>
33      <p>よき人生、よき命、よい暮らしという意味です。</p>
34    </section>
35  </div>
36    <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
37    <script type="text/javascript" src="slick.js"></script>
38  </body>
39</html>

css
1#slide{
2  position: relative;
3  width: 80%
4}
5#slide img{
6  position: absolute;
7  left: 50px;
8  top: 50px;
9  width: 300px;
10  height: 300px;
11  opacity: 0;
12}
13#slide .r1{
14  opacity: 1;

javascript
1$(document).ready(function(){
2  var flg=2;
3  setInterval(function() {
4    switch(flg){
5      case 1:
6      $(".r5").animate({opacity:0});
7      $(".r1").css({"margin-left":"250px"})
8      $(".r1").animate({
9        opacity:1,
10        "margin-left":"0px"
11      },"slow");
12      break;
13
14      case 2:
15      $(".r1").animate({opacity:0});
16      $(".r2").css({"margin-left":"250px"})
17      $(".r2").animate({
18        opacity:1,
19        "margin-left":"0px"
20      },"slow");
21      break;
22
23      case 3:
24      $(".r2").animate({opacity:0});
25      $(".r3").css({"margin-left":"250px"})
26      $(".r3").animate({
27        opacity:1,
28        "margin-left":"0px"
29      },"slow");
30      break;
31
32      case 4:
33      $(".r3").animate({opacity:0});
34      $(".r4").css({"margin-left":"250px"})
35      $(".r4").animate({
36        opacity:1,
37        "margin-left":"0px"
38      },"slow");
39      break;
40
41      case 5:
42      $(".r4").animate({opacity:0});
43      $(".r5").css({"margin-left":"250px"})
44      $(".r5").animate({
45        opacity:1,
46        "margin-left":"0px"
47      },"slow");
48      break;
49    }
50    flg++;
51    if(fig>5){
52      fig=1;
53    }
54  },1000);
55)};

kei344

2017/01/31 10:35

「上手く行きません」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

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

回答2件

javascriptで発生しているエラーが直らないというのであれば、このように行えるのではないでしょうか？
slick.jsを読み込んでいるのならば、多機能で便利なのでslick.jsを使ったほうが良いと思いますが。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="keywords" content="ベネヴィータ王慈のホームページ">
6    <meta name="description" content="ベネヴィータ王慈のホームページです。">
7    <link rel="stylesheet" type="text/css" href="ベネヴィータ王慈のホームページ.css">
8    <link rel="next" crossorigin="use-credentials"
9          href="障がい者支援施設 ベネヴィータ王慈.html 地域密着型特別養護老人ホーム ベネヴィータ王慈.html 障がい児通所支援 地域生活支援 エンゼルきっず.html">
10    <title>ベネウィータ王慈のホームページ</title>
11    <style type="text/css">
12        #slide {
13            position: relative;
14            width: 80%
15        }
16
17        #slide img {
18            position: absolute;
19            left: 50px;
20            top: 50px;
21            width: 300px;
22            height: 300px;
23            opacity: 0;
24        }
25
26        #slide .r1 {
27            opacity: 1;
28        }
29
30    </style>
31</head>
32<body>
33<div class="i">
34    <a class="b" href="ベネヴィータ王慈のホームページ.html">ベネヴィータ王慈のホームページ</a>
35</div>
36<p/><!-- このpタグは必要ないのでは？ -->
37<div class="wa">
38    <div id="slide">
39        <a href="障がい者支援施設 ベネヴィータ王慈.html"><img src="hp/ap.jpg" alt="" class="r1"></a>
40        <a href="地域密着型特別養護老人ホーム ベネヴィータ王慈.html"><img src="hp/花見0405 (5).JPG" alt="" class="r2"></a>
41        <a href="障がい児通所支援・地域生活支援 エンゼルきっず.html"><img src="hp/花見0405 (61).JPG" alt="" class="r3"></a>
42        <a href="ベネヴィータ王慈へのアクセス.html"><img src="hp/花見0405 (6).JPG" alt="" class="r4"></a>
43        <a href="ベネヴィータ王慈のホームページ (行事).html"><img src="hp/忘年会1228 (277).JPG" alt="" class="r5"></a>
44    </div>
45</div>
46<div class="tx">
47    <p><a href="#ne">法人の理念</a>と<a href="#vi">ベネヴィータの意味</a>は？</p>
48    <section class="be">
49        <p id="ne">こころゆたかに すこやかに</p>
50        <p class="be">
51            私たち王慈福祉会の使命は、ご利用者、地域の方々そして働く職員が生活していく上で価値あるものでなければならないと考えています。私たち王慈福祉会は、お一人おひとりの尊厳、ニーズや権利に対する思いを心に刻み、暖かで和やかな空間、心の拠り所を整備し、誰もが幸せになれるよう、笑顔や心のこもった高水準のサービスの提供を心がけています。<br>
52            私たちの高齢者や障がい者、児童のための高品質な支援・サービスが、地域の方から最初に選ばれる存在であり続けたいと常に願っています。<br>
53            ご利用される皆さんの権利の尊重、倫理綱領につきましては、こちらに掲載しております。<br></p>
54        <p id="vi">ベネヴィータの意味とは？</p>
55        <p>よき人生、よき命、よい暮らしという意味です。</p>
56    </section>
57</div>
58<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
59<script type="text/javascript" src="slick.js"></script>
60<script type="text/javascript">
61    $(document).ready(function () {
62        var flg = 2;
63        setInterval(function () {
64            switch (flg) {
65                case 1:
66                    $(".r5").animate({opacity: 0});
67                    $(".r1").css({"margin-left": "250px"});
68                    $(".r1").animate({
69                        opacity: 1,
70                        "margin-left": "0px"
71                    }, "slow");
72                    break;
73
74                case 2:
75                    $(".r1").animate({opacity: 0});
76                    $(".r2").css({"margin-left": "250px"});
77                    $(".r2").animate({
78                        opacity: 1,
79                        "margin-left": "0px"
80                    }, "slow");
81                    break;
82
83                case 3:
84                    $(".r2").animate({opacity: 0});
85                    $(".r3").css({"margin-left": "250px"});
86                    $(".r3").animate({
87                        opacity: 1,
88                        "margin-left": "0px"
89                    }, "slow");
90                    break;
91
92                case 4:
93                    $(".r3").animate({opacity: 0});
94                    $(".r4").css({"margin-left": "250px"});
95                    $(".r4").animate({
96                        opacity: 1,
97                        "margin-left": "0px"
98                    }, "slow");
99                    break;
100
101                case 5:
102                    $(".r4").animate({opacity: 0});
103                    $(".r5").css({"margin-left": "250px"});
104                    $(".r5").animate({
105                        opacity: 1,
106                        "margin-left": "0px"
107                    }, "slow");
108                    break;
109            }
110            flg++;
111            if (fig > 5) {
112                fig = 1;
113            }
114        }, 1000);
115    });
116
117</script>
118</body>
119</html>

投稿2017/01/31 10:47

編集2017/01/31 12:07

s8_chu

総合スコア14731

ベストアンサー

flg++;
if(fig>5){
ここまでflgとしているのにここでfigになっています
figには何も入っていない
ReferenceError: fig is not defined
},1000);
)}; //エラー場所
SyntaxError: expected expression, got ')'
逆ですね
});