前提
ワードプレスのカスタマイズHTMLウィジェットにて、
バナー画像とリンクが数秒で切り変わるフラッシュバナーを作成したいです。
環境
wordpress: 6.0.2
テーマ:Cocoon
※プラグインが現状で多くこれ以上の追加はできるかぎり無し
実現したいこと
- 交互に画像とリンクが切り替わる
- 動作を軽くしたい
- コードを綺麗にしたい
発生している問題・エラーメッセージ
動作が表示速度に若干影響している。
該当のソースコード
HTML、JS
<div id="banner_js"></div> <!-- 二枚目の画像へ切り替えの際、読み込みで一瞬空白になるため先に読み込み--> <img src="画像" style="display: none;" /> <script> var windowWidth = $(window).width(); var windowSm = 834; if (windowWidth <= windowSm) { window.onload = function(){ textin1(); } function textin1(){ let text = document.getElementById('banner_js'); document.getElementById('banner_js').innerHTML = '<a href="リンク1"><img src="画像1" border="0" alt="リンク先1"></a>'; window.setTimeout(textin2, 2000); } function textin2(){ let text = document.getElementById('banner_js').innerHTML; document.getElementById('banner_js').innerHTML = '<a href="リンク2" target="_blank"><img src="画像2" border="0" alt="リンク先2"></a>'; window.setTimeout(textin1, 2000); } } else { } </script>
試したこと
setIntervalなども試してみましたが思っている動作が実現できませんでした。
最後に
思っている動作自体は実現しているのですが、3枚で繰り返す場合などの設定も大変で
コードに無駄がないようにしたいです。
しかし改善しようにも考え方が思いつかず…
お力をお貸し頂けないでしょうか。

0 コメント