左右两侧可关闭的对联广告(图片非flash)

理解您的需求

您想实现一个网页效果：在网页的左右两侧分别放置一个广告图片，并且这两个广告图片可以被用户手动关闭。同时，您希望避免使用过时的Flash技术，转而使用更现代的Web技术。

实现方案

HTML结构

<div class="ad-container left">
  <img src="left-ad.jpg" alt="左侧广告">
  <span class="close">X</span>
</div>
<div class="ad-container right">
  <img src="right-ad.jpg" alt="右侧广告">
  <span class="close">X</span>
</div>

CSS样式

.ad-container {
  position: fixed;
  top: 10px;
  z-index: 999;
  padding: 10px;
  background-color: #f0f0f0;
}

.left {
  left: 10px;
}

.right {
  right: 10px;
}

.close {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background: #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}

JavaScript交互

const closeButtons = document.querySelectorAll('.close');

closeButtons.forEach(button => {
  button.addEventListener('click', () => {
    button.parentNode.style.display = 'none';
  });
});

代码解释

1. HTML结构:
   • 创建两个div容器，分别代表左右两个广告。
   • 在每个容器内放置一张图片和一个关闭按钮。
2. CSS样式:
   • 使用position: fixed将广告固定在页面上。
   • 使用left和right属性分别将广告定位到左右两侧。
   • 使用z-index确保广告显示在其他元素的上层。
   • 为关闭按钮设置样式，使其看起来像一个小的关闭按钮。
3. JavaScript交互:
   • 获取所有的关闭按钮。
   • 为每个关闭按钮添加点击事件。
   • 当点击关闭按钮时，隐藏其父元素（即广告容器）。

关键点

• 纯CSS实现布局: 使用CSS的position和float属性可以实现灵活的布局。
• JavaScript交互: 使用JavaScript来控制广告的显示和隐藏。
• 用户体验: 提供明显的关闭按钮，方便用户关闭广告。
• 响应式设计: 可以使用媒体查询来让广告在不同屏幕尺寸下自适应。

拓展功能

• 动画效果: 可以使用CSS3的transition或animation属性为广告添加动画效果，例如淡入淡出、滑动等。
• 广告轮播: 可以使用JavaScript定时切换广告图片。
• 广告位置随机: 可以随机生成广告的位置。
• Cookie记录: 可以使用Cookie记录用户是否关闭过广告，下次访问时不再显示。

注意

• 广告尺寸: 调整广告图片的尺寸和容器的padding，以适应您的页面布局。
• 广告位置: 可以根据您的页面布局调整广告的位置。
• 用户体验: 避免广告遮挡重要内容，影响用户体验。

这个方案使用纯HTML、CSS和JavaScript实现了左右两侧可关闭的图片广告，避免了使用Flash，符合现代Web开发的标准。

如果您需要更复杂的广告效果，例如广告跟随鼠标移动、广告自动消失等，可以进一步添加JavaScript代码来实现。

如果您还有其他问题，欢迎随时提出！

需要我为您提供更详细的代码示例或解释吗？