小编给大家分享一下layui轮播图根据图片自适应的实现方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

layui轮播图根据图片自适应(layui。旋转木马)

<>以前轮播图如果固定大小,而图片大小不相同就会导致图片失帧,所以需要根据图片动态调整高度和宽度。

文档

实现原理

监听图片大小,根据图片大小重置轮播图。

html

 & lt; div类=癱arousel"比;
　　& lt; div类=發ayui-carousel"id=癱arousel"lay-filter=癱arofilter"比;
　　& lt; div carousel-item>
　　https://www.yisu.com/zixun/& lt; img src=" 0. jpg”类=巴计狈绺?"宽度:100%;高度:汽车"/>

%20js%20

%20layui.use((&%20#%2039;旋转木马#%2039;),函数(){ 　　var旋转木马=layui.carousel; 　　var%20i=0 　　var%20ins%20var宽度=$%20(“.pic")[我]。宽*%200.5//获取宽度　　身高=$%20var%20(“.pic")[我]。高*%200.5//获取高度　　ins=carousel.render%20({ 　　elem:%20&%20#%2039;%20#旋转木马#%2039; 　　宽度:宽度、//设置容器宽度　　高度:高度, 　　箭头:&%20#%2039;盘旋#%2039;//始终显示箭头　　动画:&%20#%2039;默认#%2039;//切换动画方式　　播放:假　　}); 　　carousel.on(&%20#%2039;改变(carofilter)%20&%20#%2039;,函数(obj){//监听轮播　　i=obj.index 　　宽度=$%20(“.img")[我].width 　　身高=$%20(“.img")[我].height 　　ins。重载({//重置轮播　　elem:%20&%20#%2039;%20#旋转木马#%2039; 　　宽度:宽度、//设置容器宽度　　高度:高度, 　　箭头:&%20#%2039;盘旋#%2039;//始终显示箭头　　动画:&%20#%2039;默认#%2039;//切换动画方式　　播放:假　　}); 　　}); 　　});