首页 > 代码库 > 基于之前的效果，改变内容，变成1条滚动
基于之前的效果，改变内容，变成1条滚动
<!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 .btn{ height:40px;}
.box .btn div{ width:30px; height:30px; background:#f00; cursor:pointer;}
.box .prev{ float:left;}
.box .next{ float:right;}
.box li{font-size:70px; height:300px; line-height:300px; text-align:center; color:#fff;}
</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>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
基于之前的效果，改变内容，变成1条滚动