简单实现左右移动

$(document).ready(
function() {
$(".handle").siblings(".slide").hide();
$(".handle").siblings(".slide").eq(0).show();
$("#header").find(".slide").each(function(){
$(this).find(".content").eq(6).nextAll().hide();
$(this).find(".content").last().show();
});
}
});

function prevAndNext(this_,flag){
var tmp = "";
$(this_).parent().parent().parent().find(".content").each(function(index,node){
if($(this).is(":visible")){
tmp = tmp + "1";
}else{
tmp = tmp + "0";
}
});
tmp = tmp.substring(1,tmp.length-1);
var prev = tmp.indexOf("1");
var next = tmp.lastIndexOf("1");
if('prev' == flag){
if(prev!=0){
$(this_).parent().parent().parent().find(".content").eq(prev).show();
$(this_).parent().parent().parent().find(".content").eq(next+1).hide();
}
}else{
if(next!=tmp.length-1){
$(this_).parent().parent().parent().find(".content").eq(prev+1).hide();
$(this_).parent().parent().parent().find(".content").eq(next+2).show();
}
}
}

<div>
<div class="handle" style="background-color:#199743">
<p class="rotate">测试</p>
</div>
<div class="slide" style="display: block; background-color: rgb(216, 233, 200);">
<div class="content" style="float:left;margin-top:40px;width:45px; "><div class="btn" style="margin-left:9px;"><a href="javascript:;" onclick="prevAndNext(this,'prev')"><<</a></div></div>

<div style="float: left; margin: 5px; display: none;" class="content">
<div style="float:left;width:57px;">
案例一
</div>
</div>

<div style="float: left; margin: 5px; display: none;" class="content">
<div style="float:left;width:57px;">
案例二
</div>
</div>

<div style="float:left;margin:5px;" class="content">
<div style="float:left;width:57px;">
案例三
</div>
</div>

<div style="float:left;margin:5px;" class="content">
<div style="float:left;width:57px;">
案例四
</div>
</div>

<div style="float:left;margin:5px;" class="content">
<div style="float:left;width:57px;">
案例五
</div>
</div>

<div style="float:left;margin:5px;" class="content">
<div style="float:left;width:57px;">
案例六
</div>
</div>

<div style="float: left; margin: 5px; display: block;" class="content">
<div style="float:left;width:57px;">
案例七
</div>
</div>

<div style="float: left; margin: 5px; display: block;" class="content">
<div style="float:left;width:57px;">
案例八
</div>
</div>

<div class="content" style="float: left; margin-top: 40px; width: 45px; display: block;"><div class="btn" style="margin-left:9px;"><a href="javascript:;" onclick="prevAndNext(this,'next')">>></a></div></div>
</div>
</div>