在jQuery中匹配css媒体查询

这是我昨天关于jQuery自动图像滑块的问题的延续，你可以在这里找到- jQuery自动图像滑块。

我已经在我的css中添加了几个媒体查询，并试图在javascript中使用'if/if else'语句来镜像它们，但目前它只适用于语句的第二部分。对于其他两张幻灯片，幻灯片似乎向左移动了620px，在框架中留下了另一张图片的一部分，但在最后一张幻灯片之后仍然重置为'margin: 0'。

在代码中也有很多重复，理想情况下我想摆脱，但当我尝试在'if'语句中只包括width变量时，代码没有运行。

我难住了!如有任何帮助，我将不胜感激。

$(document).ready(function() {
	//INDEX IMAGES SLIDER
	$(function() {
		if($('#slider').width() > 760) {
			//configuration
			var width = 720;
			var speed = 1000;
			var pause = 2000;
			var current = 1;
			//cache DOM
			var $slider = $('#slider');
			var $slides = $slider.find('#slides');
			var $slide = $slides.find('.slide');
			setInterval(function() {
				$slides.animate({'margin-left': '-='+width}, speed, function() {
					current++;
					if (current === $slide.length) {
						current = 1;
						$slides.css('margin-left', 0);
					}
				});			
			}, pause);
		} else if($('#slider').width() <= 760) {
			var width = 620;
			var speed = 1000;
			var pause = 2000;
			var current = 1;
			//cache DOM
			var $slider = $('#slider');
			var $slides = $slider.find('#slides');
			var $slide = $slides.find('.slide');
			setInterval(function() {
				$slides.animate({'margin-left': '-='+width}, speed, function() {
					current++;
					if (current === $slide.length) {
						current = 1;
						$slides.css('margin-left', 0);
					}
				});			
			}, pause);
		} else {
			var width = 520;
			var speed = 1000;
			var pause = 2000;
			var current = 1;
			//cache DOM
			var $slider = $('#slider');
			var $slides = $slider.find('#slides');
			var $slide = $slides.find('.slide');
			setInterval(function() {
				$slides.animate({'margin-left': '-='+width}, speed, function() {
					current++;
					if (current === $slide.length) {
						current = 1;
						$slides.css('margin-left', 0);
					}
				});			
			}, pause);
		};
	});
 });

#slider {
	width: 720px;
	height: 400px;
	overflow: hidden;
	margin: 100px auto;
}
#slider #slides {
	display: block;
	width: 2880px;
	height: 400px;
	margin: 0;
	padding: 0;
}
#slider .slide {
	float: left;
	list-style: none;
	height: 400px;
	width: 720px;
}
#slider .slide img {
	width: 100%;
}
@media only screen and (max-width: 760px) {
	#slider {
		width: 620px;
	}
	#slider .slide {
		width: 620px;
	}
	#slider .slide img {
		width: 620px;
	}
}
@media only screen and (max-width: 650px) {
	#slider {
		width: 520px;
	}
	#slider .slide {
		width: 520px;
	}
	#slider .slide img {
		width: 520px;
	}
}

<div class="page-container">
	<div id="slider">
			
		<ul id="slides">
          
			<li class="slide"><img src="images/sp_1.png"></li>
			<li class="slide"><img src="images/ss_1.jpg"></li>
			<li class="slide"><img src="images/sd_1.jpg"></li>
			<li class="slide"><img src="images/sp_1.png"></li>
          
		</ul>
      
	</div>
</div>