<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--<link rel="stylesheet" href="css/marquee.css" />-->
<-- http://demo.lanrenzhijia.com/2016/marquee1101/ 网址-->
<style>
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#333;}
.demopage{width:960px;margin:0 auto;}
/* #marquee2 */
#marquee2{
width:162px;
/*height:324px;*/
height: 648px;
overflow:hidden;
}
#marquee2 ul li{
float:left;
border:1px solid #ddd;
height:150px;
padding:5px;
}
#marquee2 ul li img{display:block;}
.control{
height:24px;
line-height:24px;
overflow:hidden;
padding:15px 0 0 0;
}
#marquee2 ul li{
float:left;
border:1px solid #ddd;
width:120px;
height:150px;
padding:5px;
}
.aa1{
background:red;
}
.aa2{
background:orange;
}
.aa3{
background:yellow;
}
.aa4{
background:green;
}
.aa5{
background:greenyellow;
}
.aa6{
background:blue;
}
.aa7{
background:purple;
}
.aa8{
background:skyblue;
}
</style>
<body>
<div class="demopage">
<div id="marquee2">
<ul style="height: 1296px;">
<li class="aa1"></li>
<li class="aa2"></li>
<li class="aa3"></li>
<li class="aa4"></li>
<li class="aa5"></li>
<li class="aa6"></li>
<li class="aa7"></li>
<li class="aa8"></li>
</ul>
</div>
<div class="control">
<a href="javascript:void(0);" id="goD">上键</a>
<a href="javascript:void(0);" id="goU">下键</a>
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="js/marquee.js" ></script>
<script type="text/javascript">
//一次纵向滚动一个
$('#marquee2').kxbdSuperMarquee({
distance:162,
time:3,
btnGo:{up:'#goU',down:'#goD'},
direction:'down'
});
</script>
</html>
