1. 程式人生 > >響應式輪播圖片,,圖片包裹層,圖片定位 大小,等屬性設定

響應式輪播圖片,,圖片包裹層,圖片定位 大小,等屬性設定

如何設定響應式輪播圖片的屬性及位置

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

<Body>

<divclass="ss">

<div

class="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程式碼控制圖片包裹層位置變化,即可實現一些簡單的圖片響應式的輪播。