?前言

今天在做商城首頁時，遇到一個上下走馬燈功能，因為之前也只是接觸過左右的走馬燈，一時還不知道從何下手。在網上看了幾個 demo，并親自運行了一下，是可以實現的。但是，能運行不知其所以然也不行，所以還需要自己編碼去真正的理解，下面是我的示例。

1.首先定義 css樣式

#div1{

width: 180px;

margin: auto;

border: 1px solid blue;

overflow: hidden;/*必須設置該屬性*/

}

.child{

width: 100%;

height: 100%;

text-align: center;

line-height: 30px;

}

2.Js代碼

var div1;//外層div

var height = 30;//外層div高度

var rollIndex = 1;//當前滾動的索引

var millisec = 2000;//滾動間隔時間(毫秒)

var intervalIds = new Array();//計時器id數組

var datas = ["上下滾動走馬燈1", "上下滾動走馬燈2", "上下滾動走馬燈3"];

window.onload = function() {

div1 = document.getElementById("div1");

div1.style.height = height + "px";

//鼠標進入停止滾動

div1.onmouseover = function() {

clearInterval(intervalIds[0]);

}

//鼠標離開開始滾動

div1.onmouseout = function() {

intervalIds[0] = setInterval("addItem()", millisec);

}

addItem();//首先加載第一項

intervalIds[0] = setInterval("addItem()", millisec);

}

//添加滾動項

function addItem(){

var content = datas[rollIndex];

console.log("滾動item: " + rollIndex)

if(div1.childNodes.length <= 1) {

var div = document.createElement("div");

div.setAttribute("class", "child");

div.innerHTML = content;

div1.appendChild(div);

//設置兩個div的背景色

if(rollIndex % 2 == 0)

div.style.background = "#EEE9E9";

else

div.style.background = "#F0FFF0";

}

else {

div1.childNodes[0].innerHTML = content;

div1.appendChild(div1.childNodes[0]);

div1.scrollTop = 0; //兼容Firefox

}

rollIndex++;

rollIndex = rollIndex < datas.length ? rollIndex : 0;

if(div1.childNodes.length > 1) {

clearInterval(intervalIds[1]);

intervalIds[1] = setInterval("setScroll()", 20);

}

}

//設置外層div.scrollTop

function setScroll(){

div1.scrollTop++;

if(div1.scrollTop >= height) {

clearInterval(intervalIds[1]);

console.log("stop");

}

}

3.Html代碼

4.運行效果

?總結

看代碼其實并不難，但是當時我還真沒看明白是如何實現滾動的。

其實是這樣：

1.首先加如一個div。

2.然后再追加一個div，此時開始滾動(第一個div慢慢從上面移除，第二個div就隨著從下面浮現出來)。

3.第三次進入，就不再追加div了，只是將第一個的內容(也就是innerHTML)改變成新的內容，然后再將這個div重新追加(其實是調換了位置(這點很重要))到下面，然后再次滾動就看到了新的內容的div了，最后就這樣反復循環。

原文：http://www.cnblogs.com/abeam/p/7875703.html

總結

以上是生活随笔為你收集整理的html跑马灯可以上下动ma,使用 JS 实现上下滚动走马灯的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。