在網(wǎng)頁制作中，我們常常需要使用圖片上下滾動(dòng)效果，讓頁面更加豐富多彩。下面就來介紹一下如何使用js和css來實(shí)現(xiàn)圖片上下滾動(dòng)。

html代碼
<div class="scroll">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
</div>
css代碼
.scroll{
width:600px;
height:300px;
overflow:hidden;
}
.scroll img{
width:600px;
height:300px;
display:block;
margin-bottom:10px;
}
js代碼
window.onload = function(){
var oScroll = document.getElementsByClassName('scroll')[0];
var oImg = oScroll.getElementsByTagName('img');
var imgHeight = oImg[0].offsetHeight;
var len = oImg.length;
var timer = null;
var speed = 40;
function scroll(){
oScroll.scrollTop++;
if(oScroll.scrollTop % imgHeight == 0){
clearInterval(timer);
setTimeout(startScroll,2000);
}
}
function startScroll(){
timer = setInterval(scroll,speed);
}
setTimeout(startScroll,2000);
}

首先，在html中我們需要?jiǎng)?chuàng)建一個(gè)div容器，將需要滾動(dòng)的圖片都放在其中。給這個(gè)div添加一個(gè)class名字為"scroll"，并設(shè)置它的寬度和高度。使用overflow:hidden屬性來限制圖片內(nèi)容的顯示范圍。

其次，在css中，我們對(duì)圖片進(jìn)行一些樣式的設(shè)置。設(shè)置圖片的寬度和高度與div容器一致，并且讓它們成為塊級(jí)元素，方便設(shè)置間距排列等樣式。

最后，在js中，我們通過獲取div和圖片元素，計(jì)算出圖片的高度和數(shù)量，來實(shí)現(xiàn)圖片的自動(dòng)滾動(dòng)。我們首先定義一個(gè)scroll函數(shù)，讓div的scrollTop值自增，從而實(shí)現(xiàn)圖片的滾動(dòng)。同時(shí)，判斷scrollTop是否整除圖片高度，如果是，則清除定時(shí)器，延遲2秒之后再次執(zhí)行圖片滾動(dòng)。最后，定義startScroll函數(shù)，重復(fù)執(zhí)行scroll函數(shù)，并將延遲時(shí)間設(shè)定為2秒。最后在頁面加載完成后，調(diào)用startScroll函數(shù)，實(shí)現(xiàn)圖片自動(dòng)滾動(dòng)的效果。