网页常见百分百自适应宽度轮播图的一种做法解析！

最新推荐文章于 2023-09-04 16:24:45 发布

页神建辑-思而后学

最新推荐文章于 2023-09-04 16:24:45 发布

阅读量4.9k

点赞数 5

分类专栏： Web前端/Html 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_41993525/article/details/106844668

版权

Web前端/Html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

网页大屏轮播图随处可见，使用非常广泛，并且分各种不同类型，有的是居于页面中间固定宽度；有的是百分比宽，能够自适应各种媒介设备。从观感级别上看，毋庸置疑是百分比宽的轮播屏更耐看高级。
这里讲一种百分百自适应宽度轮播平的代码案例。在这里插入图片描述

如图所示，轮播图是从右向左滑动过去，带有一定过渡效果，并且无论如何缩放浏览器，轮播图始终百分百宽占满屏幕。

	  let index = 0;
      let imgItem = document.getElementsByClassName('swiper-item');
      
      function initSwiper(){
        for(let i=0;i<imgItem.length;i++){
          imgItem[i].style.left = i * 100 + '%';
        }
      }
      function slideShow(){
        for(let i=0;i<imgItem.length;i++){
          imgItem[i].style.left = (i - index) * 100 + "%";
        }
        index++;
        if(index>imgItem.length-1){
          index = 0;
        }
      }
      let timer = window.setInterval(function(){
        slideShow();
      },4000)

<body onload="initSwiper()">
    <div class="container">
      <div class="swiper-item"><img src="./swiper01.jpg" alt=""></div>
      <div class="swiper-item"><img src="./swiper02.jpg" alt=""></div>
      <div class="swiper-item"><img src="./swiper03.jpg" alt=""></div>
      <div class="swiper-item"><img src="./swiper04.jpg" alt=""></div>
    </div>
...

.container{
  padding:0;
  margin:0;
  position: relative;
  width:100%;
  height: 600px;
  overflow: hidden;
}

.swiper-item{
  padding:0;
  margin:0;
  position: absolute;
  width: 100%;
  height: 600px;
  transition: all .5s ease-in-out;
}

.swiper-item>img{
  padding:0;
  margin:0;
  width:100%;
  height: 100%;
}

该案例简单易上手，功能还不全。不过该案例有缺陷，从最后一张滚动到第一张轮播图时会有明显加长的滚动距离，且是从左到右，与前面的滚动距离、从右到左滚动相比，过渡效果就显得很突兀，有待完善！

页神建辑-思而后学

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
网页常见百分百自适应宽度轮播图的一种做法解析！

网页大屏轮播图随处可见，使用非常广泛，并且分各种不同类型，有的是居于页面中间固定宽度；有的是百分比宽，能够自适应各种媒介设备。从观感级别上看，毋庸置疑是百分比宽的轮播屏更耐看高级。这里讲一种百分百自适应宽度轮播平的代码案例。如图所示，轮播图是从右向左滑动过去，带有一定过渡效果，并且无论如何缩放浏览器，轮播图始终百分百宽占满屏幕。 let index = 0; let imgItem = document.getElementsByClassName('swiper-item');
复制链接

扫一扫

专栏目录