<div id="slide">
<div class="left-switch"></div>
<ul class="check_slide">
<li class="pop-active">
<img src="img/01.jpg" alt="">
</li>
<li>
<img src="img/jian.png" alt="">
</li>
<li>
<img src="img/add.png" alt="">
</li>
<li>
<img src="img/01.jpg" alt="">
</li>
<li>
<img src="img/01.jpg" alt="">
</li>
<li>
<img src="img/01.jpg" alt="">
</li>
<li>
<img src="img/01.jpg" alt="">
</li>
<li>
<img src="img/01.jpg" alt="">
</li>
</ul>
<div class="right-switch"></div>
</div>
</div>
var liNum=0;
$(".left-switch").click(function(){
liNum--;
if(liNum<0){
leftSwitch();
liNum=0;
}else{
if(liNum!=$(".check_slide li").length-7){
leftSwitch();
}
}
});
function leftSwitch(){
liNum = $(".check_slide li:last-child").index();
var popLiHtml = $(".check_slide li:last-child").html();
$(".check_slide").children("li").siblings("li").removeClass("pop-active");
$(".pop-pic-block").attr("src",$(".check_slide li").eq(Number(liNum)).children("img").attr("src"));
$(".check_slide").prepend("<li class='pop-active'>"+popLiHtml+"</li>");
$(".check_slide li:last").remove();
}
/*图片右切换*/
$(".right-switch").click(function(){
liNum=0;
if(liNum==$(".check_slide li").length-7){
liNum=0;
};if(liNum!=$(".check_slide li").length-7){
var popLiHtml = $(".check_slide li:first-child").html();
$(".check_slide li").eq(liNum).fadeOut().next("li").addClass("pop-active");
$(".pop-pic-block").attr("src",$(".check_slide li").eq(Number(liNum+1)).children("img").attr("src"));
$(".check_slide").append("<li>"+popLiHtml+"</li>");
$(".check_slide li:first").remove();
liNum++;
};if($(".check_slide li").length<7){
$(".check_slide li").eq(liNum).addClass("pop-active").siblings().removeClass("pop-active");
$(".pop-pic-block").attr("src",$(".check_slide li").eq(Number(liNum+1)).children("img").attr("src"));
}
});
#slide{
width: 100%;
height: 62px;
overflow: hidden;
position: relative;
margin-bottom: 20px;
}
.left-switch{
position: absolute;
top:0;
left:0;
}
.left-switch,.right-switch{
width: 20px;
height: 62px;
margin-left:2.5%;
background: url("../img/leftswitch.png") no-repeat center;
}
.right-switch{
position: absolute;
top:0;
right: 0;
margin-left: 0;
margin-right: 2.5%;
background: url("../img/right-switch.png") no-repeat center;
}
.left-switch:hover{
background: #cccccc url("../img/leftswitch2.png") no-repeat center;
}
.right-switch:hover{
background: #cccccc url("../img/rightswitch2.png") no-repeat center;
}
.check_slide{
width: 88%;
height: 62px;
overflow: auto;
margin:0 auto;
}
.check_slide li{
width: 60px;
height: 62px;
line-height: 60px;
float: left;
margin-left: 14px;
position: relative;
border:1px solid #cccccc;
margin-bottom: 5px;
}
.check_slide li img{
width: 100%;
height: 46px;
}
.check_slide .pop-active{
border:2px solid #578eff;
}
.check_slide:after,#slide:after,.popPic-box:after{
clear: both;
content: "";
display: block;
}