显示多个图片的轮播图

html部分

		

			

				
					
新品首发
				
				周一周四上新，为你寻觅世间好物
				更多新品 >
			
			

				

					
1
					
2
					
3
					
4
					
5
					
6
					
7
					
8
	
				
			
			
			
		

js部分

$(document).ready(function(){
// 轮播图
	var left = $(".new_post>.left");
	var right = $(".new_post>.right");
	var n = $(".new_post_banner ul li").length;
	var ul_length = $(".new_post_banner").outerWidth();
	var s=0;
	left.click(function(){
		if(s==1){
			return false;
		}
		s= 1;
		$(".new_post_banner ul").animate({marginLeft:-ul_length-10+'px'},1000,function(){  //10为li元素的外边距 如果此处大于10会有震荡效果
			for(i=0;i<4;i++){
				$(".new_post_banner ul>li").eq(0).appendTo(".new_post_banner ul");
				$(".new_post_banner ul").css("marginLeft","0px");
			}
			s=0;
		});
	});
	right.click(function(){
		if(s==1){
			return false;
		}
		s=1;
		for(i=0;i<4;i++){
				$(".new_post_banner ul>li").eq(n-1).prependTo(".new_post_banner ul");
			}
		$(".new_post_banner ul").css("marginLeft",-ul_length-10+'px');
		$(".new_post_banner ul").animate({marginLeft:"0px"},1000,function(){
			s=0;
		});	
	});
})