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'
});
相关内容
触发器与事件处理程序的比较
触发器与事件处理程序是用于处理特定事件的两种机制。触发器是数据库对...
2025-02-09 12:23:36
今冬最冻人时刻来了
寒冬深入,今冬最冻人时刻来临。气温骤降,人们需加强保暖措施。严寒挑...
2025-02-07 08:46:33