Question

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

我已经在我的CSS中添加了几个媒体查询，并尝试使用“if / if else＆＃39; javascript中的声明，但目前它只适用于声明的第二部分。对于其他人，幻灯片似乎向左移动620px，在框架中留下另一张图片的一部分，但仍然重置为＆＃39;边距：0＆＃39;在最后一张幻灯片之后。

在代码中也有很多重复，理想情况下我想要摆脱，但是当我尝试在＆＃39; if＆＃39;中仅包含宽度变量时。声明代码没有运行。

我很难过！任何帮助将不胜感激。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您的代码存在缺陷;滑块的宽度永远不会超过720px，这就是为什么只有if语句的第二个分支才会运行。您的最终else将永远无法运行。

在重构代码方面，您可以执行以下操作：

＆＃13;

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

＆＃13;

希望这有帮助。

Answer 2

感谢Andrew提供的解决方案，非常有帮助。我现在已经完全修复了代码，以便在页面加载时滑块工作，无论初始宽度如何，然后还响应正在调整大小的窗口。

我在下面发布了新代码。希望它对某人有用！

$(document).ready(function() {

	//INDEX IMAGES SLIDER
	$(function() {

		//configuration
		var width = $('#slider').width(); //detect width of slider on page load
		var speed = 1000;
		var pause = 7000;
		var current = 1;

		//change value of 'width' to match image widths when media queries are triggered
		$(window).resize(function() {
		    if ($('#slider').width() === 720) {
		      //configuration
		      width = 720;
		    } else if ($('#slider').width() === 620) {      
		      width = 620;
		    } else {      
		      width = 520;
		    };
		});

		//cache DOM
		var $slider = $('#slider');
		var $slides = $slider.find('#slides');
		var $slide = $slides.find('.slide');

		//move the images the defined width and speed to the left
		setInterval(function() {
			$slides.animate({'margin-left': '-='+width}, speed, function() {
				current++;
				if (current === $slide.length) {
					current = 1;
					$slides.css('margin-left', 0);
				}
			});			
		}, pause);

	});

});

在jQuery中匹配css媒体查询

2 个答案: