首页 > 其他分享 >通栏中不定数量的图片/轮播自适应宽高的简单示例

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

时间:2024-05-30 09:54:38浏览次数:27  
标签:通栏 轮播 zttl 示例 -- child zt banner swiper

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

示意图:

光是图片好说,其中有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,再根据数量执行百分比的方法,这里就不写了。

标签:通栏,轮播,zttl,示例,--,child,zt,banner,swiper
From: https://www.cnblogs.com/joe235/p/18197864

相关文章

  • Python-使用OpenCV(二)_第一个示例程序
    1、创建项目2、创建代码importcv2#加载图片image=cv2.imread("C:\\Users\\Administrator\\Pictures\\Screenshots\\20240311220733.png")#显示图片cv2.imshow("Image",image)#等待任意键被敲击cv2.waitKey(0)#关闭所有窗口cv2.destroyAllWindows()3、结......
  • YAML示例:创建daemonset
    apiVersion:apps/v1kind:DaemonSetmetadata:name:test-ds-1namespace:sjlabels:k8s-app:arksec-ds-1spec:selector:matchLabels:name:arksec-ds-1template:metadata:labels:name:arksec-ds-1spec:nodeSelector:#只让它在指定hostname的节点上创建,注意,......
  • css通过子元素选择父元素的实现示例
    在CSS中,直接通过子元素选择其父元素并不直接支持,因为CSS的选择器是从上到下(从父元素到子元素)进行选择的,而不是相反。但是,你可以使用其他方法或技术来间接实现这一效果,比如使用JavaScript、jQuery或其他脚本语言,或者通过调整你的HTML结构和CSS样式来达到类似的效果。不过,我可以给......
  • 使用Python进行数据分析与可视化的简单示例
    使用Python进行数据分析与可视化的简单示例。在这个示例中,我们将使用Pandas库进行数据分析,并使用Matplotlib库进行数据可视化。首先,假设我们有一个包含销售数据的CSV文件(sales_data.csv),其中包含以下列:日期(Date)、销售额(Sales)和产品类别(Product_Category)。CSV文件的内容可能......
  • 微信小程序------轮播图------纵向轮播图
    页面结构<swiperindicator-color="white"indicator-active-color="#ff4c91"indicator-dotsautoplayinterval="3500"duration="1000"verticalcircular><swiper-itemwx:for="{{imgUrls}}"wx:key="......
  • HDevelop示例程序-optical_flow.hdev
    应用范围:安全系统提示:这里可以添加系列文章的所有文章的目录coherence_enhancing_diff.hdevoptical_flow.hdevoptical_flow_bicycle.hdevoptical_flow_hydraulic_engineering.hdevxing.hdev提示:文章目录文章目录应用范围:安全系统前言一、原示例程序二、程序解......
  • 创建一个配置为信任所有HTTPS连接的RestTemplate实例,不验证服务器的SSL证书。这个示
    这个配置类使用背景:可参考博客:springboot使用restTemplate发送https请求忽略ssl证书https://jsonll.blog.csdn.net/article/details/129191580?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1-1......
  • Vue3.4+版本中的 defineModel 宏的用法示例
    关于defineModel,Vue官方给出了较为详细的解释,具体请看文档说明下面是整理出的一个简易示例:子元素代码://Comp.vue<scriptsetup>constmsg=defineModel('msg',{type:String,default:''});constscore=defineModel('score',{type:Number,default:0})......
  • 基于翔云C#语言的身份证实名认证接口开发示例
    现如今,安全与便捷成为了互联网服务的两大关键词。为了进一步提升用户体验并加强网络安全管理,国内多家主流App近日宣布完成一项重要功能升级——集成身份证实名认证系接口。这一举措标志着用户在进行App注册时,将享受到更加高效、安全的身份验证体验。以往,用户在注册各类App......
  • USB接口协议和应用示例
    1USB接口简介1.1USB接口发展历史USB全称为UniversalSerialBus,翻译过来就是通用串行总线。由英特尔与众多电脑公司提出来,用于规范电脑与外部设备的连接与通讯。目前USB接口已经得到了大范围的应用,已经是电脑、手机等终端设备的必配接口,甚至取代了大量的其他接口。比如......