响应式轮播图片，，图片包裹层，图片定位大小，等属性设置

最新推荐文章于 2023-09-01 14:51:21 发布

Alex-G

最新推荐文章于 2023-09-01 14:51:21 发布

阅读量1.9k

点赞数 1

分类专栏： H5 文章标签：响应式网页开发图片

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/u013692823/article/details/52863812

版权

H5 专栏收录该内容

0 篇文章

订阅专栏

如何设置响应式轮播图片的属性及位置

<styletype="text/css">
   .ss{
       width: 100%;
       position: relative;
       overflow: hidden;
   }
.inner{
      width: 400%;
      position: relative;
   }
    img{
        width: 25%;
        float: left;
    }
</style>

<Body>

<divclass="ss">

  <divclass="inner">
    <imgsrc="img/sl3.jpg"class="img1"/>
    <imgsrc="img/sl4.jpg"class="img2"/>
    <imgsrc="img/sl2.jpg"class="img3"/>
    <imgsrc="img/sl1.jpg"class="img4"/>
    </div>
</div>

<script>

$(window).resize(function(){
width=$("#slider").width();
console.log("resize:"+width);
})

</script>

</body>

有几张图片就把图片紧挨着的包裹层放大到百分之多少（x），然后给最外层的包裹层一个相对于窗口大小的100%宽度，给图片一个百分之多少乘以x等于1的宽度，高度不要设置，就可以实现响应式的放大缩小。

动态获取展示区域的宽度（即随着窗口及时的获取）：

Resize就是在window窗口发生变化时返回一个函数，用此来动态的获取展示区域即浏览器可视区域的宽度。

结合我的以上博客，在加上一些js代码控制图片包裹层位置变化，即可实现一些简单的图片响应式的轮播。

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。