js

(function($){
	$.fn.fullWidthSlider = function(options){

		//Default
		var defaults = {
		//	width:	950,
		//	height:	396,
			time:	5000,
			slideStage:	".stage",
			slideMember:"li",
			slideNavi:	".slideNavi",
			nav:true,
			mouseoverStop:true
		}
		var config = $.extend(defaults, options);
		
              $(this).css({overflow:"hidden",width:"100%",position:"relative",height:config.height});
		
		//現在の表示
		var current = 1;
	
		//DOM要素の取得
		$self = $(this);
		if($self.find(config.slideStage).length){
			$slideBox = $self.find(config.slideStage);
		}else{
			$slideBox = $self;
		}

		$slideNav = $self.find(config.slideStage);
	
		//見切れないように要素のコピー
		$slideList = $self.find(config.slideMember);
		$booby = $self.find(config.slideMember).length-2;

		$slideList.filter(":last").clone().prependTo($slideBox);
		$slideList.filter(":eq("+$booby+")").clone().prependTo($slideBox);
		$slideList.filter(":first").clone().appendTo($slideBox);		
		$slideList.filter(":eq(1)").clone().appendTo($slideBox);		

		//増えたので再取得
		$slideList = $self.find(config.slideMember);

		var windowWidth = $(window).width();
		$(window).resize(function(){
			windowWidth = $(window).width();
			$slideBox.css({marginLeft:config.width*(-current-1.5)+windowWidth*0.5});
		});

		//入れ物のCSS
		$slideBox.css({
			width:$slideList.length*config.width,
			height:config.height,
			overflow:"hidden",
			marginLeft:config.width*(-2.5)+windowWidth*0.5
		});
		
		//中身の方
		$slideList.css({
			width:config.width,
			height:config.height,
			float:"left"
		});
				
		//アニメーション
		var slide = function(target){

				if(target >= $slideList.length-3){
					target = 1;
					$slideBox.css({marginLeft:config.width*(-1.5)+windowWidth*0.5});
					
				}
				if(target < 1){
					target = $slideList.length-4;
					$slideBox.css({marginLeft:config.width*(-target-2.5)+windowWidth*0.5});
				}				
				$slideBox.stop().animate({marginLeft:config.width*(-target-1.5)+windowWidth*0.5});

				current = target;		
		}

		//自動スクロール
		var timer;
		
		var setTimer = function(target){
			clearInterval(timer);
			timer = setInterval(function(){
				current += 1;
				slide(current);
			},config.time);
		}
		setTimer(current);		

		if(config.nav){

			//sideNav
			$self.append('');
			$self.append('');
		
			$(".leftNav,.rightNav").css({
				display:"block",
				position:"absolute",
				width:config.width,
				height:config.height,
				top:0,
				zIndex:100
			}).click(function(){
				return false;
			});

			$(".leftNav").css({
				right:"50%",
				marginRight:config.width/2
			})

			$(".rightNav").css({
				left:"50%",
				marginLeft:config.width/2
			})

			$(".leftNav").click(function(){
				current = current-1;
				slide(current);
				setTimer(current);
			});

			$(".rightNav").click(function(){
				current = current+1;
				slide(current);
				setTimer(current);
			});
		}
		if(config.mouseoverStop){
			//スクロール停止
			$slideBox.mouseover(function(){
				clearInterval(timer);
			}).mouseout(function(){
				setTimer();
			});
		}
	}
})(jQuery);

記述例

$(function(){
	$(".slide").fullWidthSlider({
		width:1000,
		height:400,
    time:	4000
	});
})