jquery实现点击左右2个箭头实现图片滚动特效（李伟）

js部分：

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>（引jquery库）

<script type="text/javascript">

$(document).ready(function(){

var imgList = $("#new_brand_list");
var leftBtn = $("span.allowL");
var rightBtn = $("span.allowR");
var len = imgList.find("li").length;
var numbers = 6;

// 点击【左<-】
leftBtn.click(function(){

var active =imgList.find("li.active");
var active_index = active.index();
if(active_index > 0){
active.removeClass("active");
var left_li = imgList.find("li").eq(active_index-1);
left_li.addClass("active");
$(left_li).find("a").trigger("mouseover");
left_li.show();
}
});

// 点击【右->】
rightBtn.click(function(){

var showNumbers = getVisibleNum();

var active =imgList.find("li.active");
var active_index = active.index();

for(var i=0; i<=active_index; i++){

var left_li = imgList.find("li").eq(i);

if ($(left_li).is(":visible") == true && showNumbers > numbers) {
left_li.hide();
break;
}
}

if(active_index < (len-1)){
active.removeClass("active");
var right_li = imgList.find("li").eq(active_index+1);
right_li.addClass("active");
$(right_li).find("a").trigger("mouseover");
}
});

function getVisibleNum(){
var showNumbers = 0;
$("#new_brand_list").find("li").each(function(){
if ($(this).is(":visible") == true) {
showNumbers++;
}
});
return showNumbers;
}
});
</script>

CSS部分：

.replacementNewCarWrap-top{height:40px;line-height:40px;background:url(../images/replCar-bg.png) no-repeat left top;border-bottom:2px solid #5f6983;}
.replacementNewCarWrap-top .brand_area{ height:38px;line-height:38px;position:relative;}

.replacementNewCarWrap-top .brand_area .allowL{font-size:32px;position:absolute;top:0px;left:134px;color:#b8b8b8;cursor:pointer;}
.replacementNewCarWrap-top .brand_area .allowR{font-size:32px;position:absolute;top:0px;right:-4px;color:#b8b8b8;cursor:pointer;}
.replacementNewCarWrap-top .brand_area .qb-window{ width:614px;height:40px;margin-left:166px;overflow:hidden;position:relative;}
.replacementNewCarWrap-top .brand_area .qb{position:absolute;left:0;top:0;width:700px;height:40px;line-height:39px;font-size:16px; color:#404b66;}
.replacementNewCarWrap-top .brand_area .qb li{ float:left; text-align:center; width:100px; border-top:1px solid #b8b8b8; border-left:1px solid #b8b8b8; border-right:1px solid #b8b8b8; background:#e6e9e9;}/*width:112px;*/
.replacementNewCarWrap-top .brand_area .qb li.active{border-left:1px solid #d8d8d8;border-right:0; background:#5f6a81; color:#fff;border:2px solid #5f6983;}
.replacementNewCarWrap-top .brand_area .qb li.active a{color:#fff;}

html部分：

<div class="replacementNewCarWrap-top">
<div class="brand_area">
<span class="allowL"><</span>
<span class="allowR">></span>
<div class="qb-window">
<ul class="qb" id="new_brand_list">
<li><a href="javascript:;" onmouseover="getDataList(null,'宝马')" pea="0"><img src="<c:url value='/images/tubiao_03.jpg' />" width="100" height="40" /></a></li>
<li><a href="javascript:;" onmouseover="getDataList(null,'玛莎拉蒂')" pea="0"><img src="<c:url value='/images/tubiao_05.jpg' />" width="100" height="40" /></a></li>
<li><a href="javascript:;" onmouseover="getDataList(null,'英菲尼迪')" pea="0"><img src="<c:url value='/images/tubiao_07.jpg' />" width="100" height="40" /></a></li>
<li><a href="javascript:;" onmouseover="getDataList(null,'大众(进口)')" pea="0"><img src="<c:url value='/images/tubiao_09.jpg' />" width="100" height="40" /></a></li>
<li><a href="javascript:;" onmouseover="getDataList(null,'雷克萨斯')" pea="0"><img src="<c:url value='/images/tubiao_15.jpg' />" width="100" height="40" /></a></li>
<li><a href="javascript:;" onmouseover="getDataList(null,'别克')" pea="0"><img src="<c:url value='/images/tubiao_16.jpg' />" width="100" height="40" /></a></li>

<li><a href="javascript:;" onmouseover="getDataList(null,'雪佛兰')" pea="0"><img src="<c:url value='/images/tubiao_17.jpg' />" width="100" height="40" /></a></li>
<li><a href="javascript:;" onmouseover="getDataList(null,'广汽本田')" pea="0"><img src="<c:url value='/images/tubiao_21.jpg' />" width="100" height="40" /></a></li>
<li><a href="javascript:;" onmouseover="getDataList(null,'东风本田')" pea="0"><img src="<c:url value='/images/tubiao_22.jpg' />" width="100" height="40" /></a></li>
<li><a href="javascript:;" onmouseover="getDataList(null,'广汽丰田')" pea="0"><img src="<c:url value='/images/tubiao_23.jpg' />" width="100" height="40" /></a></li>
<li><a href="javascript:;" onmouseover="getDataList(null,'一汽丰田')" pea="0"><img src="<c:url value='/images/tubiao_27.jpg' />" width="100" height="40" /></a></li>
<li><a href="javascript:;" onmouseover="getDataList(null,'广汽传祺')" pea="0"><img src="<c:url value='/images/tubiao_28.jpg' />" width="100" height="40" /></a></li>
<li><a href="javascript:;" onmouseover="getDataList(null,'广汽菲亚特')" pea="0"><img src="<c:url value='/images/tubiao_29.jpg' />" width="100" height="40" /></a></li>
</ul>
</div>
</div>

</div>