我是JS的新手,对此问题的任何帮助都非常感谢。
我有以下一点JS:
var isMobile = false;
if(Modernizr.mq('only all and (max-width: 1024px)') ) {
isMobile = true;
}
if (isMobile === false)
/* desired function: */
slider.ev.on('rsAfterSlideChange', playSlideVideo);
playSlideVideo();
}
如果浏览器窗口加载到最大宽度之下或之上,则确实可以正常工作:1024px。问题是,如果用户在页面加载后更改窗口大小,我希望我的函数能够运行或停止。
我该如何设置呢?
这太棒了,谢谢!特别用于解释沿途评论您的代码。我80%在那里。从小窗口到大窗口时脚本工作,但从大到小不起作用。关于我如何解决的任何想法?这是我的所有代码:
var slider = $(".royalSlider").data('royalSlider'),
prevSlideVideo,
playSlideVideo = function() {
if(prevSlideVideo) {
prevSlideVideo.pause();
}
var video = slider.currSlide.content.find('video');
if(video.length) {
prevSlideVideo = video[0];
prevSlideVideo.play();
} else {
prevSlideVideo = null;
}
};
var $window = $(window); // have a reference to window
var isMobile = false; // boolean to check for mobile
var timer = 0;
function updateSlider() {
if (!isMobile) {
/* desired shenanigans: */
slider.ev.on('rsAfterSlideChange', playSlideVideo);
playSlideVideo();
}
}
$window.on("resize.slider", function() {
// delay execution to 300ms after the last resize event
timer = setTimeout(function() {
clearTimeout(timer);
isMobile = Modernizr.mq('only all and (max-width: 1024px)'); // update isMobile with mq value
updateSlider(); // run function on resize
}, 300);
}).trigger("resize.slider"); // trigger this event so you dont have to explictly call updateSlider();
答案 0 :(得分:1)
<强>更新强>
我会怀疑isMobile = Modernizr.mq('only all and (max-width: 1024px)');
部分(即使看起来很好)
此外,您似乎正在为滑块小部件分配事件。可能存在多个调整大小事件最终将多个事件“rsAfterSlideChange”附加到滑块的情况。
查看api似乎没有off
方法。
所以,记住这一点。你可以试试下面的东西:
var $window = $(window); // have a reference to window
var isMobile = false; // boolean to check for mobile
var timer = 0;
var slider = $(".royalSlider").data('royalSlider'); // slider instance
var prevSlideVideo;
var playSlideVideo = function() {
if(prevSlideVideo) {
prevSlideVideo.pause();
}
var video = slider.currSlide.content.find('video');
if(video.length) {
prevSlideVideo = video[0];
prevSlideVideo.play();
} else {
prevSlideVideo = null;
}
};
// Looking at the [api](http://dimsemenov.com/plugins/royal-slider/documentation/#api) there doesn't seem to be an ```off``` method.
// So it is probably safe to attach event only once.
slider.ev.on('rsAfterSlideChange', playSlideVideo);
$window.on("resize.slider", function() {
// delay execution to 300ms after the last resize event
timer = setTimeout(function() {
clearTimeout(timer);
// quick and dirty check of window width instead of match media, this is unreliable but should do the job for now
if ($window.width() < 1024) {
playSlideVideo();
}
// updateSlider(); // dont need this anymore as you're calling ```playSlideVideo()``` straight away
}, 300);
}).trigger("resize.slider"); // trigger this event so you dont have to explictly call updateSlider();
有很多方法可以做到。
快速的方式:
var $window = $(window); // have a reference to window
var isMobile = false; // boolean to check for mobile
function updateSlider() {
if (!isMobile) {
/* desired shenanigans: */
slider.ev.on('rsAfterSlideChange', playSlideVideo);
playSlideVideo();
}
}
$window.on("resize.slider", function() {
isMobile = Modernizr.mq('only all and (max-width: 1024px)'); // update isMobile with mq value
updateSlider(); // run function on resize
}).trigger("resize.slider"); // trigger this event so you don't have to explicitly call updateSlider();
调整大小事件的有趣之处在于,当调整窗口大小时,它们会多次触发,有很多方法可以限制此事件,下面是单向
var $window = $(window); // have a reference to window
var isMobile = false; // boolean to check for mobile
var timer = 0;
function updateSlider() {
if (!isMobile) {
/* desired shenanigans: */
slider.ev.on('rsAfterSlideChange', playSlideVideo);
playSlideVideo();
}
}
$window.on("resize.slider", function() {
// delay execution to 300ms after the last resize event
timer = setTimeout(function() {
clearTimeout(timer);
isMobile = Modernizr.mq('only all and (max-width: 1024px)'); // update isMobile with mq value
updateSlider(); // run funtion on resize
}, 300);
}).trigger("resize.slider"); // trigger this event so you dont have to explictly call updateSlider();
我没有测试过上面的代码(可能提供一个小提琴?)但是应该让你朝着正确的方向前进。如果有什么不清楚,请告诉我。
祝你好运