<html>
<head>
</head>
<body>
<div id="divScroll">
<div class="divLightBox">
<img src="/images/img1.jpg" title="demo scroll"/>
</div>
<div class="divLightBox">
<img src="/images/img2.jpg" title="demo scroll"/>
</div>
<div class="divLightBox">
<img src="/images/img3.jpg" title="demo scroll"/>
</div>
<div class="divLightBox">
<img src="/images/img4.jpg" title="demo scroll"/>
</div>
<div class="divLightBox">
<img src="/images/img5.jpg" title="demo scroll"/>
</div>
<div class="divLightBox">
<img src="/images/img6.jpg" title="demo scroll"/>
</div>
<div class="divLightBox">
<img src="/images/img7.jpg" title="demo scroll"/>
</div>
<div class="divLightBox">
<img src="/images/img8.jpg" title="demo scroll"/>
</div>
<div class="divLightBox">
<img src="/images/img9.jpg" title="demo scroll"/>
</div>
<div class="divLightBox">
<img src="/images/img10.jpg" title="demo scroll"/>
</div>
</div>
</body>
</html>
2. CSS:
<style>
#divScroll {
width: 500px;
height: 190px;
overflow-y: hidden;
overflow-x: scroll;
position: relative;
}
.divLightBox {
width: 170px;
padding-right: 10px;
position: absolute;
top:0px;
}
.divLightBox img{
width: 95%;
height: 100%;
}
</style>
3. Javascript:
<script>
$(document).ready(function () {
var w = $(".divLightBox").width(); --get width a divLightBox element
var num = $(".divLightBox").length; --get number of element
var count = 1;
if (num != undefined && num > 1) {
for (i = 1; i < num; i++) {
$(".divLightBox").eq(i).css('left', w * i); --add css left to each element
}
}
});
</script>
Không có nhận xét nào:
Đăng nhận xét