javascript - 在 jQuery 中匹配 css 媒体查询

Question

这是我昨天关于自动 jQuery 图像 slider 的问题的延续，您可以在这里找到它 - Jquery automatic image slider .

我已经在我的 css 中添加了几个媒体查询，并试图在 javascript 中使用“if/if else”语句来反射(reflect)它们，但目前它只适用于语句的第二部分。对于其他两张幻灯片，幻灯片似乎向左移动了 620 像素，在框架中留下了另一张图片的一部分，但在最后一张幻灯片之后仍重置为“边距: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>

Answer 1

您的代码存在根本性缺陷； slider 的宽度永远不会超过 720px，这就是为什么只有 if 的第二个分支。语句运行。你的决赛else永远不会运行。

就重构代码而言，您可以这样做:

$(document).ready(function() {

  //INDEX IMAGES SLIDER
  $(function() {

    var width;
    var speed = 1000;
    var pause = 2000;
    var current = 1;

    if ($('#slider').width() > 760) {
      //configuration
      width = 720;
    } else if ($('#slider').width() <= 760) {      
      width = 620;
    } else {      
      width = 520;
    };

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

  });
});

希望这对您有所帮助。