用js写一个底部悬浮广告代码,三个图片轮番显示,有一个关闭广告按钮,pc端不显示,手机wap端显示。
以下是一个简单的底部悬浮广告代码,它使用了jQuery库来实现图片轮播和关闭广告按钮的功能。在PC端,它只是一个普通的div,而在手机WAP端,它会显示为一个悬浮广告。
HTML代码:
<div id="bottom-ad">
<div class="ad-img">
<img src="img/ad-1.jpg">
<img src="img/ad-2.jpg">
<img src="img/ad-3.jpg">
</div>
<a href="#" class="close-btn">关闭</a>
</div>
CSS代码:
#bottom-ad {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background-color: #fff;
border-top: 1px solid #ccc;
display: none;
}
#bottom-ad .ad-img {
position: relative;
height: 80px;
overflow: hidden;
}
#bottom-ad .ad-img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
#bottom-ad .close-btn {
position: absolute;
top: 5px;
right: 10px;
font-size: 12px;
color: #999;
text-decoration: none;
}
@media only screen and (max-width: 767px) {
#bottom-ad {
display: block;
}
}
JavaScript代码:
$(function() {
// 定义图片轮播的间隔时间
var interval = 5000;
// 获取广告图片和关闭按钮
var adImg = $('#bottom-ad .ad-img');
var adImgs = adImg.find('img');
var closeBtn = $('#bottom-ad .close-btn');
// 定义当前显示的图片索引
var index = 0;
// 设置第一张图片可见
adImgs.eq(index).show();
// 定义图片轮播函数
function rotateImg() {
adImgs.eq(index).fadeOut();
index = (index + 1) % adImgs.length;
adImgs.eq(index).fadeIn();
}
// 启动图片轮播
setInterval(rotateImg, interval);
// 关闭广告按钮的点击事件
closeBtn.click(function() {
$('#bottom-ad').hide();
});
});
在PC端,底部悬浮广告会被隐藏起来,而在手机WAP端,它会显示出来并开始轮播图片。用户可以点击关闭按钮来关闭广告。
原文地址: https://www.cveoy.top/t/topic/zU2 著作权归作者所有。请勿转载和采集!