利用JQUERY來寫,
代碼示例:
<style>
img{display:block;}
.showbox{width:226px;height:160px;border:solid 6px red;margin:0 auto;overflow:hidden;}
.imgbox{width:904px;border:solid 6px blue;}
.imgbox img{float:left;}
</style>
<body>
<div class="showbox">
<div class="imgbox">
<img src="images/0.jpg">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/0.jpg">
</div>
</div>
<script>
n=0;/*次數*//*行走函數*/
function run(){
if(n<$(".imgbox img").length-1){
n=n+1;
}else{
$(".imgbox").css({marginLeft:0});
n=1;
}
$(".imgbox").animate({marginLeft:-226*n},1000);
document.title=n;
}
setInterval(run,2000);
</script>
</body>
主要是讓圖片全部浮動FLOAT排列在壹排
然後父級設置成只顯示壹張圖片的大小
並且用?overflow:hidden來隱藏超出父級的圖片。
4.利用JQUERY,來寫壹個定時輪播的效果。(獲取圖片的個數,利用animate,來控制移動的距離,利用setInterval(run,2000);來寫控制循環播放)