html跑马灯可以上下动ma,使用 JS 实现上下滚动走马灯

?前言

今天在做商城首页时，遇到一个上下走马灯功能，因为之前也只是接触过左右的走马灯，一时还不知道从何下手。在网上看了几个 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]);

}

//鼠标离开