在jQuery中匹配CSS媒體查詢

Question

這是我昨天關於自動jQuery圖像滑塊的問題的延續，您可以在這里找到-jQuery自動圖像滑塊 。

我在CSS中添加了一些媒體查詢，並嘗試在javascript中使用“ if / if else”語句來鏡像它們，但是目前，該查詢僅適用於該語句的第二部分。 對於其他兩個幻燈片，幻燈片似乎向左移動620像素，在幀中保留了另一張圖片的一部分，但在最后一張幻燈片之后仍重置為'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> 

Answer 1

您的代碼存在根本性缺陷； 滑塊的寬度永遠不會超過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); }); }); 

希望這可以幫助。

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