文章/答案/技术大牛

发布

带关闭的js对联广告代码

带关闭功能的JavaScript对联广告代码通常用于在网页上显示一对位于页面两侧的广告，并提供一个关闭按钮，以便用户可以选择不看这些广告。以下是一个简单的示例代码，包括HTML、CSS和JavaScript部分：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对联广告示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="ad-container left-ad">
        <span class="ad-close-btn">X</span>
        <img src="left-ad.jpg" alt="左侧广告">
    </div>
    <div class="ad-container right-ad">
        <span class="ad-close-btn">X</span>
        <img src="right-ad.jpg" alt="右侧广告">
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

.ad-container {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

.left-ad {
    left: 0;
}

.right-ad {
    right: 0;
}

.ad-close-btn {
    position: absolute;
    top: 0;
    cursor: pointer;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #ccc;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    var closeButtons = document.querySelectorAll('.ad-close-btn');
    closeButtons.forEach(function(btn) {
        btn.addEventListener('click', function() {
            this.parentElement.style.display = 'none';
        });
    });
});

基础概念

HTML: 超文本标记语言，用于创建网页的结构。
CSS: 层叠样式表，用于设置网页元素的样式。
JavaScript: 一种脚本语言，用于实现网页上的交互效果。

类型

图片广告: 如示例中所示，使用<img>标签展示图片。
文字广告: 可以使用<div>或其他块级元素来展示文字。
富媒体广告: 包含动画、视频等多媒体内容的广告。

应用场景

网站推广: 在网站两侧放置广告以吸引用户注意。
产品宣传: 推广特定的产品或服务。
活动通知: 宣传即将到来的促销活动或重要事件。

遇到的问题及解决方法

问题: 广告无法关闭。原因: JavaScript代码未正确执行或事件监听器未绑定成功。 解决方法: 检查JavaScript代码是否有语法错误，确保DOM元素已完全加载后再绑定事件监听器。

问题: 广告遮挡页面内容。原因: 广告的z-index值设置过高或未正确设置。 解决方法: 调整广告容器的z-index值，确保它不会高于页面主要内容的z-index值。

通过以上代码和解释，你应该能够实现一个带有关闭功能的对联广告，并理解其背后的基础概念和技术细节。

页面内容是否对你有帮助？

有帮助

没帮助

带关闭的js对联广告代码

HTML部分

CSS部分（styles.css）

JavaScript部分（script.js）

基础概念

相关优势

类型

应用场景

遇到的问题及解决方法

相关·内容

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐