WordPressでフラッシュバナーを作成したい

前提

ワードプレスのカスタマイズ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 コメント