tp5 layui banner图片自适应高度
未知
2021-09-11 18:04:50
0次
<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'
});
相关内容