在網頁制作中，我們常常需要使用圖片上下滾動效果，讓頁面更加豐富多彩。下面就來介紹一下如何使用js和css來實現圖片上下滾動。

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中我們需要創建一個div容器，將需要滾動的圖片都放在其中。給這個div添加一個class名字為"scroll"，并設置它的寬度和高度。使用overflow:hidden屬性來限制圖片內容的顯示范圍。

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

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