基于layui轮播图满屏是高度自适应的解决方法

为了让你更好地理解“基于layui轮播图满屏是高度自适应的解决方法”，我为你准备了以下的详细攻略：

1.准备工作

在开始实现这个方法之前，我们首先需要准备以下工作：

一个基于layui框架的轮播图组件
一个能够实现高度自适应的外层容器
一个设备宽度的全局变量

2.实现方法

接下来，我们就可以开始着手实现高度自适应的轮播图了。具体的实现方法如下：

2.1.设置外层容器

我们首先要实现外层容器的高度自适应。具体来说，我们可以设置容器的高度为“100%”，然后再用CSS3的“calc()”函数来减去轮播图组件的导航栏高度，从而实现容器的高度自适应。例如，下面的代码就是一个实现高度自适应的容器样式：

.container {
  height: calc(100% - 50px);
}

2.2.实现轮播图高度自适应

为了实现轮播图的高度自适应，我们需要在轮播图组件的配置选项里面添加一个回调函数。这个回调函数会在轮播图初始化以及窗口大小改变的时候触发，我们可以在这个回调函数中动态设置轮播图的高度，从而实现高度自适应。例如，下面的代码就是一个实现轮播图高度自适应的示例：

layui.use('carousel', function(){
  var carousel = layui.carousel;

  carousel.render({
    elem: '#test1',
    width: '100%',
    height: '100%',
    arrow: 'none',
    interval: 5000,
    anim: 'default',
    autoplay: false,
    indicator: 'none',
    full: true,
    index: 0,
    setHeight: function(Othis){
      var height = document.documentElement.clientHeight;
      var width = document.documentElement.clientWidth;
      Othis.elem.css('height', height+'px');
      Othis.elem.find('>.layui-carousel-main>div').each(function(){
        var othis = $(this);
        othis.css('height', othis.width()*(parseInt(height / width))+ 'px');
      });
    }
  });
});

在这段代码中，我们通过设置“full: true”参数，让轮播图组件能够占满整个容器，从而让轮播图的高度可以随着容器的高度自适应。而“setHeight”这个回调函数则是用来实现轮播图的高度自适应的，它会在轮播图初始化以及窗口大小改变时触发。在这个回调函数中，我们首先获取浏览器窗口的高度和宽度，然后利用这个宽高比来设置轮播图的高度，从而实现轮播图的高度随容器自适应。

3.示例说明

为了帮助你更好地理解这个攻略，下面我为你准备了两个示例。这些示例都是基于layui框架的轮播图组件实现的。

3.1.示例1

在这个示例中，我们将会利用CSS3的“calc()”函数来实现高度自适应：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例1</title>
  <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css" media="all">
  <style>
    html,body{
      height:100%;
    }
    .container{
      height:calc(100% - 50px);
      background:#333;
      color:#fff;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="layui-carousel" id="test1">
    <div carousel-item>
      <img src="https://i.loli.net/2017/08/21/599a521472424.jpg" alt="">
    </div>
    <div carousel-item>
      <img src="https://i.loli.net/2017/08/21/599a521472424.jpg" alt="">
    </div>
    <div carousel-item>
      <img src="https://i.loli.net/2017/08/21/599a521472424.jpg" alt="">
    </div>
  </div>
</div>

<script src="https://www.layuicdn.com/layui-v2.5.7/layui.js" charset="utf-8"></script>
<script>
  layui.use(['carousel'], function(){
    var carousel = layui.carousel;

    carousel.render({
      elem: '#test1',
      width: '100%',
      height: '100%',
      arrow: 'none',
      interval: 5000,
      anim: 'default',
      autoplay: false,
      indicator: 'none',
      full: true,
      index: 0,
      setHeight: function(Othis){
        var height = document.documentElement.clientHeight;
        var width = document.documentElement.clientWidth;
        Othis.elem.css('height', height+'px');
        Othis.elem.find('>.layui-carousel-main>div').each(function(){
          var othis = $(this);
          othis.css('height', othis.width()*(parseInt(height / width))+ 'px');
        });
      }
    });
  });
</script>
</body>
</html>

在这个示例中，我们通过设置容器的高度为：“calc(100% - 50px)”来实现高度自适应。轮播图组件的代码和上面的示例一样，这里就不再赘述了。

3.2.示例2

在这个示例中，我们则会利用jQuery来实现高度自适应：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例2</title>
  <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css" media="all">
  <style>
    html,body{
      height:100%;
    }
    .container{
      height:100%;
      background:#333;
      color:#fff;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="layui-carousel" id="test2">
    <div carousel-item>
      <img src="https://i.loli.net/2017/08/21/599a521472424.jpg" alt="">
    </div>
    <div carousel-item>
      <img src="https://i.loli.net/2017/08/21/599a521472424.jpg" alt="">
    </div>
    <div carousel-item>
      <img src="https://i.loli.net/2017/08/21/599a521472424.jpg" alt="">
    </div>
  </div>
</div>

<script src="https://www.layuicdn.com/layui-v2.5.7/layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var clientWidth = document.documentElement.clientWidth;
  var clientHeight = document.documentElement.clientHeight;
  layui.use(['carousel'], function(){
    var carousel = layui.carousel;

    carousel.render({
      elem: '#test2',
      width: '100%',
      height: '100%',
      arrow: 'none',
      interval: 5000,
      anim: 'default',
      autoplay: false,
      indicator: 'none',
      full: true,
      index: 0,
      setHeight: function(Othis){
        Othis.elem.css('height', clientHeight+'px');
        Othis.elem.find('>.layui-carousel-main>div').each(function(){
          var othis = $(this);
          othis.css('height', othis.width()*(parseInt(clientHeight / clientWidth))+ 'px');
        });
      }
    });
  });
  $(window).resize(function(){
    clientWidth = document.documentElement.clientWidth;
    clientHeight = document.documentElement.clientHeight;
    $("#test2 .layui-carousel-main>div").each(function(){
      var me = $(this);
      me.css('height', me.width()*(parseInt(clientHeight / clientWidth))+ 'px');
    });
    $("#test2").css('height', clientHeight+'px');
  });
</script>
</body>
</html>

在这个示例中，我们首先定义了两个全局变量，“clientWidth”和“clientHeight”，这两个变量用来存储当前浏览器窗口的宽度和高度。然后在轮播图的回调函数中，我们就可以使用这两个全局变量来动态地设置轮播图的高度了。同时，我们还通过jQuery来动态地监听窗口大小的变化，从而实现轮播图的高度自适应。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于layui轮播图满屏是高度自适应的解决方法 - Python技术站