js随机显示图片广告,可关闭广告
时间: 2023-07-15 18:15:11 浏览: 43
你可以通过以下代码实现这个功能:
HTML:
```html
<div id="ad-container">
<img id="ad-img" src="" alt="Advertisement">
<button id="close-btn">Close</button>
</div>
```
CSS:
```css
#ad-container {
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
display: none;
}
#ad-img {
max-width: 90%;
max-height: 90%;
}
#close-btn {
position: absolute;
top: 5px;
right: 5px;
}
```
JavaScript:
```javascript
const ads = [
'ad1.jpg',
'ad2.jpg',
'ad3.jpg'
];
const adContainer = document.getElementById('ad-container');
const adImg = document.getElementById('ad-img');
const closeBtn = document.getElementById('close-btn');
function showAd() {
const randomIndex = Math.floor(Math.random() * ads.length);
const randomAd = ads[randomIndex];
adImg.src = randomAd;
adContainer.style.display = 'block';
}
function hideAd() {
adContainer.style.display = 'none';
}
closeBtn.addEventListener('click', hideAd);
showAd();
```
这个代码会从 `ads` 数组中随机选择一张图片显示在广告容器中。用户可以点击关闭按钮来隐藏广告。你需要把数组中的图片路径替换为你自己的图片路径。