jQuery插入广告位功能：可指定固定位置，第几行后插入广告和随机某一行后插入广告，每次刷新位置不一样两种模式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文章列表插入广告</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.article-item {
padding: 12px;
margin: 8px 0;
border: 1px solid #d3d3d3;
}
.ad-item {
padding: 20px;
background: #fff3cd;
text-align: center;
color: #856404;
font-weight: bold;
margin: 10px 0;
border: 1px solid #ffeeba;
}
</style>
</head>
<body>
<h3>文章列表</h3>
<div id="articleList">
<div class="article-item">文章内容 1</div>
<div class="article-item">文章内容 2</div>
<div class="article-item">文章内容 3</div>
<div class="article-item">文章内容 4</div>
<div class="article-item">文章内容 5</div>
<div class="article-item">文章内容 6</div>
<div class="article-item">文章内容 7</div>
<div class="article-item">文章内容 8</div>
</div>
<script>
$(function() {
// 配置项
const articleItem = '.article-item'; // 文章项选择器
const adHtml = '<div class="ad-item">这里是广告位</div>'; // 广告内容
const insertType = 'random'; // 插入类型：fixed=固定行，random=随机行
const fixedLine = 3; // 固定第几行后插入广告
// 获取所有文章项
const $articles = $(articleItem);
const totalCount = $articles.length;
if (totalCount === 0) return;
let insertIndex;
if (insertType === 'fixed') {
// 固定位置插入
insertIndex = fixedLine - 1;
} else {
// 随机位置插入（范围：第1行 ~ 倒数第2行，避免广告在最后）
insertIndex = Math.floor(Math.random() * (totalCount - 1));
}
// 执行插入：在指定行之后添加广告
$articles.eq(insertIndex).after(adHtml);
});
</script>
</body>
</html>本站原创内容，转载请注明来源：https://www.liutonghui.com/86
评论列表（0条）
暂无评论