當前位置:編程學習大全網 - 網站源碼 - 用Dreamweaver怎樣做出淘寶上的輪播圖片?

用Dreamweaver怎樣做出淘寶上的輪播圖片?

利用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);來寫控制循環播放)

  • 上一篇:如何把現有的二級域名變為壹級目錄?
  • 下一篇:泡泡瑪特同城急送當天能到嗎
  • copyright 2024編程學習大全網