您现在的位置是:

tp5 layui banner图片自适应高度

发布时间:2021-09-11作者:小灵龙来源:未知点击:192

<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div><img src="assets/images/test1a.png" alt="广告" style="width:100%"></div>
        <div><img src="assets/images/test1b.png" alt="广告" style="width:100%"></div>
    </div>
  </div>
layui.use('carousel', function(){
  var W = $('#test1').width();//获取容器的宽度
  var screenImage = $('#test1 img');//获取轮播图DOM

  var theImage = new Image(); theImage.src = screenImage.attr("src");

  var b = theImage.width/theImage.height;//获取轮播图的原始宽高比例


  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height:  (W/b).toString()+"px" //设置容器宽度
    ,autoplay: false //设置容器宽度
    // ,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
    ,indicator:'none'
  });

如果帮到了您,请打赏一二!

标签: