最近接到一个需求，在一个页面会有多个通栏，每个通栏中会有不固定数量的图片或轮播图，要求各图片/轮播要同等比例自适应宽高，写成通用代码。
示意图：
光是图片好说，其中有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);
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。