我试图阻止脚本运行,如果浏览器宽度超过640px,基本上如果浏览器超过640px,那么它应该显示一个网格,如果它小于640px然后显示幻灯片。
以下代码允许我在浏览器小于640px时加载脚本,否则执行另一个脚本。
var currentState = false;
function setSize() {
var state = $(window).width() < 640;
if (state != currentState) {
currentState = state;
if (state) {
}
else {
}
}
}
setSize();
$(window).on('resize', setSize);
这是我想在浏览器小于640px时运行的实际代码
window.sliderInit = (function (window, document, undefined) {
'use strict';
// Feature Test
if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {
// SELECTORS
var sliders = document.querySelectorAll('[data-slider]');
var mySwipe = Array;
// EVENTS, LISTENERS, AND INITS
// Add class to HTML element to activate conditional CSS
document.documentElement.className += ' js-slider';
// Activate all sliders
Array.prototype.forEach.call(sliders, function (slider, index) {
// SELECTORS
var slideCount = slider.querySelector('[data-slider-count]'); // Slider count wrapper
var slideNav = slider.querySelector('[data-slider-nav]'); // Slider nav wrapper
// METHODS
// Display count of slides
var createSlideCount = function () {
// Variables
var slideTotal = mySwipe[index].getNumSlides();
var slideCurrent = mySwipe[index].getPos();
// Content
if ( slideCount !== null ) {
slideCount.innerHTML = slideCurrent + ' of ' + slideTotal;
}
};
// Display Slider navigation
var createNavButtons = function () {
if ( slideNav !== null ) {
slideNav.innerHTML = '<a data-slider-nav-prev href="#">Previous</a> | <a data-slider-nav-next href="#">Next</a>';
}
};
// Stop YouTube and Vimeo videos from playing when leaving the slide
var stopVideo = function () {
var currentSlide = mySwipe[index].getPos() - 1;
var iframe = slider.querySelector( '[data-index="' + currentSlide + '"] iframe');
var video = slider.querySelector( '[data-index="' + currentSlide + '"] video' );
if ( iframe !== null ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
if ( video !== null ) {
video.pause();
}
};
// Handle next button
var handleNextBtn = function (event) {
event.preventDefault();
stopVideo();
mySwipe[index].next();
};
// Handle previous button
var handlePrevBtn = function (event) {
event.preventDefault();
stopVideo();
mySwipe[index].prev();
};
// Handle keypress
var handleKeypress = function (event) {
if ( event.keyCode == 37 ) {
mySwipe[index].prev();
}
if ( event.keyCode == 39) {
mySwipe[index].next();
}
};
// EVENTS, LISTENERS, AND INITS
// Activate Slider
mySwipe[index] = Swipe(slider, {
continuous: true,
callback: function(index, elem) {
createSlideCount(); // Update with new position on slide change
}
});
// Create slide count and nav
createSlideCount();
createNavButtons();
var btnNext = slider.querySelector('[data-slider-nav-next]'); // Next slide button
var btnPrev = slider.querySelector('[data-slider-nav-prev]'); // Previous slide button
// Toggle Previous & Next Buttons
if ( btnNext ) {
btnNext.addEventListener('click', handleNextBtn, false);
}
if ( btnPrev ) {
btnPrev.addEventListener('click', handlePrevBtn, false);
}
// Toggle Left & Right Keypress
window.addEventListener('keydown', handleKeypress, false);
});
}
})(window, document);
这可以解决问题,如果你打开http://jsfiddle.net/xc2cgs6b/show并且你的浏览器超过640px它会显示一个网格,如果你然后将浏览器的大小调整到小于640px它将显示幻灯片,到目前为止它工作正常,但一旦你再次调整它超过640px它应该回到网格,但它不会,如果你打开浏览器小于640px,它根本不起作用。
这是代码视图http://jsfiddle.net/xc2cgs6b/
中的小提琴我被告知bind和unbind可以工作,但我不知道如何实现它。
由于