バナーを数秒毎に自動で切り替えたい。

Question

前提・実現したいこと

バナーを数秒毎に自動で切り替えたい。

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

今埋まっているバナーはシステムで出しており、html側を変更することができない状況です。
飛び先を含め自動で切り替えたいのですが、エラーが解消できずに困っている状況です。

システムの中身についてはくわしく分かりません。
機能的には、バナーの管理画面で画像やURLやIDなどの情報を登録して承認されると、指定した期間の間Web上にバナーが表示されるといったものです。
通常であれば2枚それぞれ登録したらよいのですが、同じ会社からの広告を同時に2箇所の場所をとって掲載ができない状況であり、場所的には1箇所の掲載のまま自動で2枚切り替えならOKということで現在試しているところです。

該当のソースコード

<li class="item">
<a href="飛び先1" target="_blank" id="ad_A" tabindex="0">
<img src="画像1" alt="広告1">
</a>
</li>

イメージとしては、広告1と広告2を数秒毎にぱっぱと切り替えられるようにしたいです。

var img = [
'<a href="飛び先1" target="_blank" id="ad_A" tabindex="0"><img src="画像1" alt="広告1"></a>',

'<a href="飛び先2" target="_blank" id="ad_B" tabindex="0"><img src="画像2" alt="広告2"></a>'
];

var count = -1; //*2
imgTimer();

function imgTimer() {
	//画像番号
	count++; //*3
	//画像の枚数確認
	if (count == img.length) count = 0; //*4
	//画像出力
    document.getElementById("ad_A").parent().innerHTML = img[count];
	//次のタイマー呼びだし
	setTimeout("imgTimer()",1000); //*6
}

うまくいかない点

画像出力のところが、うまくいっていないです。
画像だけでなくhtml自体を変えたく試しましたが、動きません。

<li class="item">のところは、上下にも同クラスのバナーたちがおり、しかもアクセス毎に他バナーとランダムで順番が入れ替わる仕様になっているため、順番を指定することはできません。

参考ページ：http://www.shurey.com/js/samples/3_img8.html

エラー情報

エディタ上では

16行目（document～）→’document’ is not defined
18行目（setTimeout～）→’setTimeout’ is not defined

と出ており、

DeveloperTool上だと、

Uncaught TypeError: document.getElementById(...).parent is not a function
at imgTimer (test.js:16)
at test.js:8

と出ています。

Comments

[yambejp]

HTMLが変えられないなら、jsもcssも反映できないのでは？

[m.ts10806]

出ているエラーをご提示ください

[hoho]

＞yambejpさん
コメントありがとうございます。
jsやCSSはすでに入っているものを修正してアップできるので反映は可能です。

＞m.ts10806さん
コメントありがとうございます。
エディタ上では
16行目（document～）→’document’ is not defined
18行目（setTimeout～）→’setTimeout’ is not defined
と出ており、

DeveloperTool上だと、
Uncaught TypeError: document.getElementById(...).parent is not a function
at imgTimer (test.js:16)
at test.js:8
と出ています。

[m.ts10806]

質問本文に追記願います

[hoho]

＞m.ts10806さん
不慣れですみません、ご指摘ありがとうございます。
本文に追記しました。

[oikashinoa]

> 今埋まっているバナーはシステムで出しており、
公表出来るのであれは、どんなシステムを使っているかを本文に書くとより良い回答がつくかも。

[hoho]

＞oikashinoaさん
アドバイスありがとうございます。
システムの中身については詳しくわからないのですが書けるところまで追記しました。

Answer 1

スマホからなので簡単に。
あと、乗り入れているシステムで許されるのかは確認して下さい。
質問内容と筋が変わるので話半分で。

広告表示と切り替えは、カルーセル(swiper.jsなど)に任せるのは有りかも。

ただし、以下の要件を考えるとグレーなので管理者に確認したほうが良いです。

通常であれば2枚それぞれ登録したらよいのですが、同じ会社からの広告を同時に2箇所の場所をとって掲載ができない状況であり、場所的には1箇所の掲載のまま自動で2枚切り替えならOKということで現在試しているところです。

Answer 2

Elementオブジェクトにはparentというメソッドはないと思います。

Element - Web API | MDN

おそらく、NodeオブジェクトのparentElementプロパティとjQueryのparent()メソッドとを、混同されたのでは。
Node.parentElement - Web API | MDN
.parent() | jQuery API Documentation

---

また、document.getElementById("ad_A")という部分がありますが、2つ目のバナーはidが異なるので、上手く動かないのではないでしょうか？

Comments

[hoho]

＞Lhankor_Mhyさん
おっしゃる通り、いろいろと混同しておりました…
idの件、ヒントになりました。ありがとうございます。

Answer 3

最初の相談で上げた記述とはだいぶ離れるのですが、実現したい動きにはなりましたので掲載します。

$(window).load(function() {
    setInterval(function () {

        if (document.getElementById('ad_A')) {
            $('#ad_A').parent().html('<a href="飛び先2" target="_blank" id="ad_B" tabindex="0"><img src="画像2" alt="広告2">');
        } else {
            $('#ad_B').parent().html('<a href="飛び先1" target="_blank" id="ad_A" tabindex="0"><img src="画像1" alt="広告1">');
        }

    }, 2000);
});