通栏中不定数量的图片/轮播自适应宽高的简单示例
最近接到一个需求,在一个页面会有多个通栏,每个通栏中会有不固定数量的图片或轮播图,要求各图片/轮播要同等比例自适应宽高,写成通用代码。
示意图:
光是图片好说,其中有swiper就会比较麻烦。
代码:
<div class="container"> <div class="zt_banner"> <div class="swiper"> <a href="" target="_blank"><img src="/images/banner/xjpxsd301.jpg"/></a> </div> <div class="swiper"> <a href="" target="_blank"><img src="/images/banner/gcddesdjs_301.png"/></a> </div> <div class="swiper swiper3"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="" target="_blank"><img src="/images/banner/xjpfzsx301.png"/></a> </div> </div> </div> </div> <div class="zttl"> <div class="swiper swiper8"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="" target="_blank" ><img src="/images/banner/qingming_240.png"/></a> </div> <div class="swiper-slide"> <a href="" target="_blank"><img src="/images/banner/zjsdkmbwz_240.jpg"/></a> </div> </div> </div> <div class="swiper"> <a href="" target="_blank"><img src="/images/banner/zyzfgzhy2024_240.png"/></a> </div> <div class="swiper"> <a href="" target="_blank"><img src="/images/banner/qggjfyyzh2024_240.png"/></a> </div> <div class="swiper"> <a href="" target="_blank"><img src="/images/banner/jfcjjx10th_240.png"/></a> </div> <div class="swiper swiper2" > <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="" target="_blank"><img src="/images/banner/fytcyszpzy242.png"/></a> </div> <div class="swiper-slide"> <a href="" target="_blank"><img src="/images/banner/fatxdrrx301.jpg" /></a> </div> </div> </div> </div> </div>
css:
:root { --child-width1:33%; --child-height1:118px; --child-width2:25%; --child-height2:118px; } .container { background:#fff; width:1240px; margin:0 auto; padding:0 20px; } .zt_banner, .zttl { width:1240px; height:auto; max-height:118px; overflow:hidden; display:flex; flex-direction:row; justify-content:space-between; } .zt_banner { max-height:var(--child-height1); } .zttl { max-height:var(--child-height2); } .zt_banner .swiper, .zttl .swiper { margin-right:10px; overflow:hidden; } .zt_banner .swiper{ width: var(--child-width1); } .zttl .swiper { width: var(--child-width2); } .zt_banner .swiper:last-of-type, .zttl .swiper:last-of-type { margin-right:0; } .zt_banner .swiper img, .zttl .swiper img { width:100%; } .zt_banner .swiper-slide, .zttl .swiper-slide { float:none !important; }
js:
setChildWidth('.zt_banner','--child-width1','33%'); setChildWidth('.zttl','--child-width2','20%'); function setChildWidth(selector,child,width) { var parentElement = document.querySelector(selector); parentElement.style.setProperty(child, width); // 仅更改这个父元素下的子元素的宽度 } document.querySelector('.zttl').style.setProperty('--child-height2','80px'); createSwiper('.swiper3',4000); createSwiper('.swiper8',4000); createSwiper('.swiper2',4000); // 创建 Swiper 实例 function createSwiper(selector,autoplayTime) { new Swiper(selector, { autoplay: autoplayTime, //时间 mode: 'vertical', //切换方向 默认:horizontal loop: true // 循环模式选项 }); }
高也可以写个通用方法,还有判断div下有几个swiper,再根据数量执行百分比的方法,这里就不写了。
补充:轮播图既可以垂直切换,也可以水平切换,所以要增加一个切换方式的变量。
代码:
// 创建 Swiper 实例 function createSwiper(selector,mode,autoplayTime) { new Swiper(selector, { autoplay: autoplayTime, //时间 mode: mode, //切换方向 默认:horizontal loop: true // 循环模式选项 }); }
但是水平切换时有个问题,因为上次改样式的时候,把 .swiper-slide 的浮动给强制取消了,所以这里出了问题。
增加一个样式:
.floatL .swiper-slide{float:left !important}
然后判断一下切换方式,水平切换时增加这个样式
// 创建 Swiper 实例 function createSwiper(selector,mode,autoplayTime) { if(mode == 'horizontal') { $(selector).addClass('floatL') } new Swiper(selector, { autoplay: autoplayTime, //时间 mode: mode, //切换方向 默认:horizontal loop: true // 循环模式选项 }); } createSwiper('.swiper3','vertical',4000); createSwiper('.swiper8','vertical',4000); createSwiper('.swiper2','horizontal',4000);