以下是一个简单的底部悬浮广告代码,它使用了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端,它会显示出来并开始轮播图片。用户可以点击关闭按钮来关闭广告。

用js写一个底部悬浮广告代码,三个图片轮番显示,有一个关闭广告按钮,pc端不显示,手机wap端显示。

原文地址: https://www.cveoy.top/t/topic/zU2 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录