jquery实现图片的左右滚动

就是这个部分的js。

html的部分：

<div class="thumbPic">
					<!-- 当鼠标滑向时 li上增加样式 hover -->
					<ul class="" style="width:1200px" id="smallPics">
						<li class="hover" ><img src="temp/pic_50x50_1.jpg" /></li>
						<li><img src="temp/pic_50x50_2.jpg" /></li>
						<li><img src="temp/pic_50x50_1.jpg" /></li>
						<li><img src="temp/pic_50x50_2.jpg" /></li>
						<li><img src="temp/pic_50x50_1.jpg" /></li>
						<li><img src="temp/pic_50x50_2.jpg" /></li>
						<li><img src="temp/pic_50x50_1.jpg" /></li>
						<li><img src="temp/pic_50x50_2.jpg" /></li>
						<li><img src="temp/pic_50x50_1.jpg" /></li>
					</ul>
				</div>
				<!-- 
					没有上一项和下一项 样式分别为thumbNoPrev thumbNoNext
					有上一页和下一项的样式为thumbPrev thumbNext 
					有上一页和下一项时鼠标指向的样式分别为thumbPrevHover  thumbNextHover
				-->
				<div class="thumbNoPrev" id="thumbPrev">向左</div>
				<div class="thumbNext" id="thumbNext">向右</div>

js的部分：

//左移
function moveLeft(obj,prevBtn,nextBtn){
	var _ul=$(obj).find("ul");
	var _li=$(obj).find("li");
	var rightLength=_li.eq(0).outerWidth(true);
	rightLength=$(obj).scrollLeft()-rightLength;
	$(obj).animate({scrollLeft:rightLength},{complete:function(){
		if(rightLength>0){
			nextBtn.addClass("thumbNext").removeClass("thumbNoNext");
		}else{
			prevBtn.addClass("thumbNoPrev").removeClass("thumbPrev");
		}
	},duration:400});
}
//右移
function moveRight(obj,prevBtn,nextBtn){
	var _ul=$(obj).find("ul");
	var _li=_ul.find("li");
	var rightLength=_li.eq(0).outerWidth(true);
	var lisLength=0;
	$(_li).each(function(){
		lisLength+=$(this).outerWidth(true);
	});
	var objWidth=$(obj).outerWidth(true);
	var ulPaddingLeft=parseInt(_ul.css("padding-left"));
	var pos=$(obj).scrollLeft()+rightLength;
	if(pos<lisLength-objWidth+ulPaddingLeft){
		$(obj).animate({scrollLeft:pos},{complete:function(){
			if($(obj).scrollLeft()+rightLength<lisLength-objWidth+ulPaddingLeft){
				prevBtn.addClass("thumbPrev").removeClass("thumbNoPrev");
			}else{
				nextBtn.addClass("thumbNoNext").removeClass("thumbNext");
			}
		},duration:400});
	}
	
	
}

调用js的部分：

	//初始化向右按钮样式
	if($("#smallPics >li").length>5){
		$("#thumbNext").addClass("thumbNext").removeClass("thumbNoNext");
	}else{
		$("#thumbNext").removeClass("thumbNext").addClass("thumbNoNext");
	}
	//向左
	$("#thumbPrev").click(function(){
		moveLeft($(".thumbPic"),$(this),$("#thumbNext"));
	});
	//向右
	$("#thumbNext").click(function(){
		moveRight(".thumbPic",$("#thumbPrev"),$(this));
	});

css的部分就不写了，大家根据自己的样式写一下就好了。特别注意，那个ul一定要设很宽的宽度，要不然li内容多了就折行了。