首页 > 代码库 > 多条滚动by myself

多条滚动by myself

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.11.1.min.js"></script>
<style>
*{margin:0; padding:0;}
li{list-style:none;}
.box{width:550px;margin:0 auto; background:#000;}
.wrap{height:300px; overflow:hidden; }
.box li{}
.box li .time{float:right;height:30px; line-height:30px;padding-left:20px;}
.box li a{height:30px; line-height:30px; color:#f60; word-break:break-all;overflow:hidden; display:block;}
.box li a:hover{text-decoration:underline;}
.box .btn{ height:40px;}
.box .btn div{ width:30px; height:30px; background:#f00; cursor:pointer;}
.box .prev{ float:left;}
.box .next{ float:right;}


</style>
<script>
$(function(){
var $li=$(".box").find("li"),
li_len=$li.length,
li_height=$li.height(),
page_li_len=Math.floor($(".box").height()/li_height),
page=Math.ceil(li_len/page_li_len),
scrollHeight=li_height*(page_li_len),
li_width=$li.width(),
index=0;

var slideFunc=function(){
if(index>=page){index=0;}else if(index<=-1){index=page-1;}
console.log(index);
$(".box").find("ul").animate({marginTop:-index*scrollHeight});
};
$(".prev").on("click",function(){
index=index-1;
slideFunc();
});
$(".next").on("click",function(){
index=index+1;
slideFunc();
});

});

</script>

</head>

<body>
<div class="box">
<div class="btn">
<div class="prev"></div>
<div class="next"></div>
</div>
<div class="wrap">
<ul>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
<li><span class="time">4564654654</span><a href="">无标题文档无标题文档无标题文档无标题文档</a></li>
</ul>
</div>
</div>

</body>
</html>

多条滚动by myself