0

首先：我不喜欢 JavaScript/JQuery！…但我会尝试指出我想做什么。

我在我的页面上使用了奇妙的 bx-slider，我通过媒体查询使我的网站具有响应性，到目前为止这两种方法都很好用。…但是 bx-slider-script 中有一些功能我不想在特定的浏览器宽度上激活。这就是我想要的：

browser-width LOWER than 500px = 加载这个函数：

$('#slider4').bxSlider({
    minSlides: 2,
    maxSlides: 2,
    slideWidth: 230,
    slideMargin: 10,
    nextSelector: '#next',
    prevSelector: '#prev',
    infiniteLoop: false,
    hideControlOnEnd: true,
    pager: false,
    useCSS: false,
    easing: 'easeInOutExpo',
    speed: 1000
});

browser-width HIGHER than 500px = 隐藏上面的函数并加载这个：

$('#slider4').bxSlider({
    minSlides: 4,
    maxSlides: 4,
    slideWidth: 230,
    slideMargin: 20,
    nextSelector: '#next',
    prevSelector: '#prev',
    infiniteLoop: false,
    hideControlOnEnd: true,
    pager: false,
    useCSS: false,
    easing: 'easeInOutExpo',
    speed: 1000
});

……这在 JavaScript 中是否可行？我尝试了一些使用断点的脚本，但它认为我的 JS 知识太弱，无法让它按我的意愿工作。

如果有人在这里可以向我展示如何轻松做到这一点，那就太好了！

4

1 回答 1

3 
If($(document).width() < 500){
...
}else{
...
}

http://api.jquery.com/width/

您可能还想加入一个 onchange 事件

$( window ).resize(function() {
 resizefunction();
});

http://api.jquery.com/resize/

于 2013-10-17T09:04:06.533 回答