このJavaScript

誰か下記のJavaScriptのコードで画像をスライドショーに設定をしましたそれをループと１０秒間隔の設定するコードを教えて下さい。

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 class="slide">
18    <a href="障がい者支援施設 ベネヴィータ王慈.html"><img src="ap.jpg" alt="ベネヴィータの写真"></a>
19    <a href="地域密着型特別養護老人ホーム ベネヴィータ王慈.html"><img src="hp/花見0405 (5).JPG" alt=""></a>
20    <a href="障がい児通所支援・地域生活支援 エンゼルきっず.html"><img src="hp/花見0405 (61).JPG" alt=""></a>
21    <a href="ベネヴィータ王慈へのアクセス.html"><img src="hp/花見0405 (6).JPG"></a>
22    <a href="ベネヴィータ王慈のホームページ (行事).html"><img src="hp/忘年会1228 (277).JPG" alt=""></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>

javascript
1$(function(){
2var page=0;
3var lastpage =parseInt($(".slide img").length-1);
4  $(".slide img").css("disply","none");
5    $("slide img").ep(page).css("display","block");
6function changePage(){
7                      $(".slide img").fadeOut(10000);
8                      $(".slide img").ep(page).fadeIn(10000);
9};
10var Timer;
11function startTimer(){
12Timer =setInterval(function(){
13         if(page === lastpage){
14                        page = 0;
15                        changePage();
16         }eise(
17                        page ++;
18                        changePage();
19         );
20    },60000);
21}
22function stopTimer(){
23clearInterval(Timer);
24}
25startTimer();
26
27});

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

回答4件

ベストアンサー

とりあえずミスをすべて修正してみました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        body {
13            background-color: beige;
14        }
15    </style>
16</head>
17<body>
18<div class="slide">
19    <a href="page1.html">
20        <img src="https://placehold.jp/ff70cb/ffffff/200x150.png?text=image1">
21    </a>
22    <a href="page2.html">
23        <img src="https://placehold.jp/9970ff/ffffff/200x150.png?text=image2">
24    </a>
25    <a href="page3.html">
26        <img src="https://placehold.jp/70b3ff/ffffff/200x150.png?text=image3">
27    </a>
28    <a href="page4.html">
29        <img src="https://placehold.jp/70ffea/ffffff/200x150.png?text=image4">
30    </a>
31    <a href="page5.html">
32        <img src="https://placehold.jp/70ff7c/ffffff/200x150.png?text=image5">
33    </a>
34    <a href="page6.html">
35        <img src="https://placehold.jp/f8ff70/ffffff/200x150.png?text=image6">
36    </a>
37</div>
38<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
39<script>
40    $(document).ready(function () {
41        let Timer;
42        let page = 0;
43        let lastpage = parseInt($(".slide img").length - 1);
44
45        $(".slide img").css("display", "none");//タイプミス: disply -> display
46        $(".slide img").eq(page).css("display", "block");//タイプミス: ep -> eq
47
48        function changePage() {
49            $(".slide img").fadeOut(1000);
50            $(".slide img").eq(page).fadeIn(1000);//タイプミス: ep -> eq
51        }
52
53        function startTimer() {
54            Timer = setInterval(function () {
55                if (page === lastpage) {
56                    page = 0;
57                    changePage();
58                } else {// タイプミス
59                    page++;
60                    changePage();
61                }
62            }, 6000);
63        }
64
65        function stopTimer() {
66            clearInterval(Timer);
67        }
68
69        startTimer();
70    });
71</script>
72</body>
73</html>

投稿2017/01/26 09:25

編集2017/01/26 09:32

s8_chu

総合スコア14731

スライドショー自体の仕様提示がないし、
HTMLもないのでなんとも答えづらいですが
slideクラスの段落にある複数あるimgから一つだけ表示するのでしょうか？

とりあえず一応コードにあるようにループはsetIntervalで問題ないし、
10秒間隔は10000ミリ秒指定でいいと思います

投稿2017/01/26 08:57

yambejp

総合スコア114779

yambejp

2017/01/26 09:36

もう一点よくわからないのですが、画像の切り替えはクロスフェードをかんがえているのでしょうか？それとも前の画像がフェードアウトしてから次の画像がフェードインしてくればいいのでしょうか？クロスフェードするなら、positionの調整などしないときれいに切り替わりません

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

slick.js があるのであれば独自にスライダーを使わなくても良いと思います。
JavaScriptとCSSはフルパスで書いたほうが間違いが少ないと思います。

HTML
1<link rel="stylesheet" href="http://example.com/slick.css">
2<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
3<script src="http://example.com/slick.js"></script>
4<script>
5$( function(){
6	$( '.slide ' ).slick( {
7	  autoplay: true,
8	  autoplaySpeed: 10000,
9	} );
10} );
11</script>