通栏中不定数量的图片/轮播自适应宽高的简单示例

最近接到一个需求，在一个页面会有多个通栏，每个通栏中会有不固定数量的图片或轮播图，要求各图片/轮播要同等比例自适应宽高，写成通用代码。

示意图：

光是图片好说，其中有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);