顯示多個圖片的輪播圖

html部分

		<div class="new_post">
			<div class="title clearfix">
				<a href="">
					<h3>新品首發</h3>
				</a>
				<small>週一週四上新，爲你尋覓世間好物</small>
				<a href="" class="more">更多新品 <b>></b></a>
			</div>
			<div class="new_post_banner">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>	
				</ul>
			</div>
			<span class="left new_left"></span>
			<span class="right new_right"></span>
		</div>

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;
		});	
	});
})