最近想给网站首页和文章内页添加一个2行4列的广告位图片代码。找了些网络教程自己又略作调整。
效果大致如下:
1、每个广告有一个整体关闭按钮、且有广告提示字样。
2、每个广告中2张图片轮流切换展示。
3、整体高度80px,宽度自适应。
4、点击图片跳转到目标页面。
5、鼠标放在图片上图片放大,。
6、移动端改为4行2列的布局。
7、关闭任意广告位其他广告宽度自动调整。
动态效果如下:
代码分享出来,有需要的朋友可以试一试!
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .ad-container { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; width: 100%; box-sizing: border-box; } /* PC端布局(2行4列) */ .ad-item { position: relative; flex: 1 0 calc(25% - 6px); height: 80px; min-width: 120px; overflow: hidden; border-radius: 2px; transition: all 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } /* 移动端布局(4行2列) */ @media (max-width: 768px) { .ad-item { flex: 1 0 calc(50% - 6px); } } .ad-close { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; background: rgba(0,0,0,0.7); border-radius: 50%; color: white; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 12px; } .ad-label { position: absolute; top: 2px; left: 2px; background: rgba(0,0,0,0.7); color: white; padding: 1px 4px; border-radius: 1px; font-size: 10px; z-index: 2; } .slider-link { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } .slider-image { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: slide 5s infinite; transition: transform 0.3s ease; } /* 悬停放大效果 */ .slider-link:hover .slider-image { transform: scale(1.1); } .slider-image:nth-child(1) { animation-delay: 0s; } .slider-image:nth-child(2) { animation-delay: 2.5s; } @keyframes slide { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } } </style> </head> <body> <div class="ad-container"> <!-- 广告项模板 --> <div class="ad-item"> <div class="ad-close">×</div> <div class="ad-label">AD</div> <a href="#" class="slider-link" target="_blank"> <img src="ad1.jpg" class="slider-image"> <img src="ad2.jpg" class="slider-image"> </a> </div> <!-- 复制7个相同结构 --> </div> <script> document.querySelectorAll('.ad-close').forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); const item = btn.closest('.ad-item'); item.style.transform = 'scale(0.9)'; item.style.opacity = '0'; setTimeout(() => { item.remove(); adjustLayout(); }, 300); }); }); function adjustLayout() { const container = document.querySelector('.ad-container'); const items = document.querySelectorAll('.ad-item'); // 根据剩余数量调整布局 items.forEach(item => { if(items.length < 4 && window.innerWidth > 768) { item.style.flex = '1 0 calc(33.33% - 6px)'; } else { item.style.flex = window.innerWidth > 768 ? '1 0 calc(25% - 6px)' : '1 0 calc(50% - 6px)'; } }); } window.addEventListener('resize', adjustLayout); </script> </body> </html>
使用方法:
代码复制到对应主题模板的广告位或者直接粘贴到对应主题文件的要显示位置即可。
继续阅读
评论