*{
margin: 0;
padding: 0;
}
#maxbox{
width: 405px;
height: 400px;
margin: 0 auto;
}
/* 这是标题部分 */
#maxbox .changlink{
width: 405px;
height: 40px;
line-height:40px;
background: pink;
}
/*搜索热点部分 */
#maxbox .changlink .searchhot{
display: inline-block;
margin-left: 10px;
}
/* 换一换 */
#maxbox .changlink .change{
text-decoration: none;
margin-left: 265px;
}
/* 内容区域最大的盒子 设置宽高 超出部分消失 它的高度应该和每一批的高度一致 24*6=144 */
#maxbox .listcontentbox {
position: relative;
overflow: hidden;
width: 405px;
height: 144px;
}
/* li的父级元素ui */
#maxbox .listcontentbox .listcontent{
position: absolute;
list-style: none;
}
#maxbox .listcontentbox .listcontent>li{
height: 24px;
width: 405px;
line-height: 24px;
background: #ccc;
}
#maxbox .listcontentbox .listcontent>li:nth-child(even){
background-color: #E6E6E6
}
<!--
布局=》 一个大的div 中包含2个小的div 一个是标题 一个是内容 内容中有ul 》li
css样似=》
内容区域最大的盒子 设置宽高 超出部分消失 它的高度应该和每一批的高度一致 24*6=144 相对定位
li的父级元素ul绝对定位
li内容区域应该这是行高 和高度
思路：
计算li的父级ui的高度。----》计算现实6个li的高度-----》定义一个索引值，点击按钮，索引值加1----》ul上上移动
if(num==6){ //如果有n批就等于n
num=0;
}
ul.style.top=-liheight*num+"px"; //这里是ul往上移动，而不是ul的高度往上移动
-->
<div id="maxbox">
<!-- 这是标题部分 -->
<div class="changlink">
<span class="searchhot">搜索热点</span> <a href="javascript:;" class="change">换一换</a>
</div>
<!-- 这是内容部分 -->
<div class="listcontentbox">
<ul class="listcontent">
<li>1111111</li>
<li>2222222</li>
<li>1111111</li>
<li>4444444</li>
<li>1111111</li>
<li>66666666</li>
<li>1111111</li>
<li>2222sfsfsdf222</li>
<li>1111111</li>
<li>4444222sfsfsdf444</li>
<li>1111111</li>
<li>66666666</li>
<li>1111111</li>
<li>2222222</li>
<li>11111sfsf11</li>
<li>4444444</li>
<li>1111111</li>
<li>6666sfs6666</li>
<li>1111111</li>
<li>22222fsd22</li>
<li>1111111</li>
<li>4444444</li>
<li>1111111</li>
<li>66666666</li>
<li>1111111</li>
<li>22sczfdsfsfdfsdf22222</li>
<li>1111111</li>
<li>4444444</li>
<li>1111sfsf111</li>
<li>66666666</li>
<li>1111111</li>
<li>2222222</li>
<li>11111sfsdf11</li>
<li>4444444</li>
<li>1111111</li>
<li>66666666</li>
</ul>
</div>
</div>
// css中ul要超出部分就隐藏起来
var changeLinkModule=(function(){
// 计算li的父级ui的高度
var ul=document.querySelector(".listcontent");
var ulheight=ul.offsetHeight;
console.log(ulheight); //
// 计算现实6个li的高度
var li=document.querySelector(‘li‘);
var liheight=li.offsetHeight * 6;
console.log("每一批的高度是"+liheight); //24*6=144
var num=0;// 定义一个索引值
var change= document.querySelector(".change"); //选中按钮
var changelist=function(){
change.addEventListener(‘click‘,function(){
// alert("1");
// 这里你打不出来是是因为后面 你没有调用
num++;
if(num==6){ //如果有n批就等于n
num=0;
}
ul.style.top=-liheight*num+"px"; //这里是ul往上移动，而不是ul的高度往上移动
});
};
return {
huanyihuan:changelist
}
})();
changeLinkModule.huanyihuan();
原文地址：https://www.cnblogs.com/IwishIcould/p/10421280.html