質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.01%

webページのスライドショー作成について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 529

abskroy

score 5

スライドショーの実装

現在、webのトップページを作成しており、画像をスライドショーさせる機能をJavaScriptにて実装しようとしています。スライドの仕方としては、下記URLのスライドを縦ではなく、横にしたものです。
(参考サイト:http://www.hp-stylelink.com/news/2014/04/20140401.php)

このようなスライドショーをjqueryを使わず、JavaScriptで実装したいと考えております。

発生している問題・エラーメッセージ

上記のような実装を行おうと思いましたが、

Uncaught TypeError: slideshow is not a function
    at slideshow (sample.js:26)
    at window.onload (sample.js:28)


というエラーが出力されます。
slideshowという関数が存在しないというエラーですが、slideshow()という関数は存在しているので、なぜこのようなエラーが出力されるのかわかりません。

該当のソースコード

<div id="slideshow">
    <img src=top3.jpg" height="500px" width="960px" alt="top-img">
    <img src="top4.jpg" height="500px" width="960px" alt="top-img">
    <img src="top0.jpg" height="500px" width="960px" alt="top-img">
    <img src="top1.jpg" height="500px" width="960px" alt="top-img">
    <img src="top2.jpg" height="500px" width="960px" alt="top-img">
</div>
window.onload = function() {
    function slideshow() {
        var img = [];
        var marginX = 0;
        // スライドショーの画像を取得
        var slideshow = document.getElementById("slideshow");
        var slideshowChild = document.getElementById("slideshow").children;
        for (var i = 0; i < slideshowChild.length; i++) {
            if (slideshowChild.item(i).nodeName == "IMG") {
                img.push(slideshowChild.item(i));
            }
        }
        // アニメーションの実装
        var animation = function() {
            marginX = marginX - 30;
            img[0].style.marginLeft = marginX + "px";
            var loop = setTimeout(animation, 1);
            if (marginX <= -960) {
                marginX = 0;
                img[0].style.marginLeft = marginX + "px";
                var tmp = img[0];
                slideshow.removeChild(img[0]);
                slideshow.appendChild(tmp);
                clearTimeout(loop);
            }
        };
        setTimeout(animation, 5000);
        slideshow();
    }; 
    slideshow();
};

</div>

試したこと

2行目のfunction slideshow() {};
の部分をvar slideshow = function() {};
に書き換えたりはしましたが、こちらはslideshowという関数を定義しているか、slideshowに関数を代入しているかの違いという理解で合っているのでしょうか。これらの場合、両方の実行の仕方に何か違いはあるのでしょうか。
もしよければ合わせて教えていただければと思います。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

var slideshow = document.getElementById("slideshow"); // 変数名が関数と同じなのでここで上書きしてしまっている

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/26 19:10

    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.01%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる