JSFiddle - React, Tailwind, and code Playground
HTML
<div id="page">
<br /> ...
<br />
<div id="ad_container"></div>
<br />
<br /> ...
<br />
<div id="ad_infobox"></div>
<br />
<br /> ...
<br />
</div>
CSS
#page {
text-align:center;
background:#CCCCCC;
}
#ad_container {
margin:0 auto;
padding:6px;
width:480px;
background:#FFFFAA;
}
JavaScript
/* ----------------------------------- */
var bannerdata = [
' <a href="https://www.lima-city.de/?ref=246803/" target="_blank"><img src="http://www.lima-city.de/images/banner/lima-city_468x60_2.gif" alt="Gratis werbefreier Webspace | lima-city: kostenloser Webspace" title="Gratis werbefreier Webspace | lima-city: kostenloser Webspace" border="0"/></a> ',
' <a href="https://www.lima-city.de/?ref=246803/" target="_blank"><img src="http://www.lima-city.de/images/banner/lima-city_468x60_3.gif" alt="Gratis werbefreier Webspace | lima-city: kostenloser Webspace" title="Gratis werbefreier Webspace | lima-city: kostenloser Webspace" border="0"/></a> ',
' <a href="https://www.lima-city.de/?ref=246803/" target="_blank"><img src="http://www.lima-city.de/images/banner/next-level_468x60_1.gif" alt="Gratis werbefreier Webspace | lima-city: kostenloser Webspace" title="Gratis werbefreier Webspace | lima-city: kostenloser Webspace" border="0"/></a> ',
];
/* ----------------------------------- */
var brun = 0;
var refresh_time = 3000;
var maxb = bannerdata.length;
/* ----------------------------------- */
$(document).ready(function () {
var bannerhtml = bannerdata[brun];
$('#ad_container').html("\n" + bannerhtml + "\n");
$('#ad_infobox').html("start banner");
refreshIntervalId = window.setInterval(function () {
brun++;
if (3 <= brun) {
/* clearInterval(refreshIntervalId); */
brun = 0;
}
var bannerhtml = bannerdata[brun];
$('#ad_container').html("\n" + bannerhtml + "\n");
$('#ad_infobox').html("banner nr: " + (brun + 1) + " von " + maxb);
}, refresh_time);
});
/* ----------------------------------- */