前言：实现效果--类型于淘宝显示图片栏，一组4张展示图片介绍，默认只显示其中的3张，这里是顺着排列，并且可以循环。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.btn,.sul li{
width: 50px;
height: 50px;
border: 1px solid red;
box-sizing: border-box;
list-style: none;
}
.showbox{
height: 150px;
position: relative;
overflow: hidden;
}
.showbox .sul{
position: absolute;
top: 0;
left:0;
}
.showbox .sul li.act{
background: green;
}
</style>
</head>
<body>
<div class="sider">
<div class="btn btntop">上</div>
<div class="showbox">
<ul class="sul">
<li class="li1 act">1</li>
<li class="li2">2</li>
<li class="li3">3</li>
<li class="li4">4</li>
</ul>
</div>
<div class="btn btnbottom">下</div>
</div>
<script src="jquery.min.js"></script>
<script>
$(function(){
var i=0;
var clone=$(".sul li").clone();
$(".sul").append(clone);
var size=$(".sul li").size();
$(".btntop").click(function(){
moveT();
});
$(".btnbottom").click(function(){
moveB();
});
// 封装的动画函数
var sizes=5;
function moveT(){
i++;
console.log(i);
if(i==sizes){
$(".sul").css({top:0});
i=1;
}
$(".sul").stop().animate({top:-i*50},500);
}
function moveB(){
i--;
console.log(i);
if(i==-1){
console.log(sizes-1);
$(".sul").css({top:-(sizes-1)*50+'px'});
i=sizes-2;
}
$(".sul").stop().animate({top:-i*50+'px'},500);
}
$(".showbox").on("click","li",function(){
$(this).siblings().removeClass("act");
if($(this).hasClass("li1")){
$(".sul li.li1").addClass("act")
}
if($(this).hasClass("li2")){
$(".sul li.li2").addClass("act")
}
if($(this).hasClass("li3")){
$(".sul li.li3").addClass("act")
}
if($(this).hasClass("li4")){
$(".sul li.li4").addClass("act")
}
})
});
</script>
</body>
</html>原理：克隆一份出来，接着排，显示最后一张的时候，可以看到克隆出来的第一张紧跟着，不会出现空白。
以下效果是父级元素没有裁边的效果
选中效果：选中第二项时，应同时让本来就有的元素，以及克隆出来的元素成为选中状态。
最后效果：
