響應式輪播圖片,,圖片包裹層,圖片定位 大小,等屬性設定
如何設定響應式輪播圖片的屬性及位置
<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
<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程式碼控制圖片包裹層位置變化,即可實現一些簡單的圖片響應式的輪播。