如何实现全屏轮播的banner图？

实现全屏轮播的banner图，可以采用以下步骤：

1. 设置轮播图容器的宽高为100%，即占据整个屏幕的宽高。

2. 将轮播图容器内的图片都设置为宽高100%。

3. 使用JavaScript或jQuery编写轮播功能代码，实现图片自动切换和手动切换的效果。

4. 可以使用CSS3的transition属性和transform属性，实现图片切换时的动画效果。

以下是一个简单的实现全屏轮播的banner图的示例代码：

HTML代码：

<div class="banner">
  <img src="img/banner1.jpg" alt="">
  <img src="img/banner2.jpg" alt="">
  <img src="img/banner3.jpg" alt="">
</div>

CSS代码：

.banner {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.banner img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.banner img.active {
  opacity: 1;
}

JavaScript代码：

$(function() {
  var $banner = $('.banner');
  var $imgs = $banner.find('img');
  var index = 0;
  var len = $imgs.length;

  // 初始化第一张图片
  $imgs.eq(0).addClass('active');

  // 自动切换图片
  setInterval(function() {
    index++;
    if (index >= len) {
      index = 0;
    }
    $imgs.removeClass('active');
    $imgs.eq(index).addClass('active');
  }, 3000);

  // 手动切换图片
  $banner.on('click', function() {
    index++;
    if (index >= len) {
      index = 0;
    }
    $imgs.removeClass('active');
    $imgs.eq(index).addClass('active');
  });
});

以上代码中，使用jQuery实现了轮播功能，每隔3秒自动切换图片，同时也可以点击图片手动切换。CSS3的transition和transform属性实现了图片切换时的渐变动画效果。