6

当浏览器窗口缩小到一定大小并对列表应用不同的样式时，我试图删除bxslider元素的样式和 javascript，但它正在做奇怪的事情。

从 502px 以下放大，一切看起来和工作正常，但是当再次缩小时，滑块会消失，但新的样式被破坏了。目前我只是重新加载页面，如果它低于 502 像素，这感觉很糟糕。

这是我的代码：

编辑：根据要求，我已将相关的 HTML、javascript 和 CSS 添加到 JSFiddle：http: //jsfiddle.net/tYRJ2/2/。（CSS 不完整，但它显示了问题。）

var sliderActive = false;
var slider;

function createSlider() {
    slider = jQuery('.bxslider').bxSlider({
        adaptiveHeight: false,
        swipeThreshold: 40,
        controls: true,
        auto: true,
        pause: 6000,
        autoHover: true,
      });
      return true;
}

//create slider if new page is wide
jQuery(document).ready(function(){
    if (window.innerWidth > 502) {
        sliderActive = createSlider();
    }
});

//create/destroy slider based on width
jQuery(window).resize(function () {

    //if wide and no slider, create slider
    if (window.innerWidth > 502 && sliderActive == false) {
        sliderActive = createSlider();
    }

    //else if narrow and active slider, destroy slider
    else if (window.innerWidth <= 502 && sliderActive == true){
        slider.destroySlider();
        sliderActive = false;
        location.reload();  //fudgey
    }
    //else if wide and active slider, or narrow and no slider, do nothing
});

任何帮助深表感谢！

4

1 回答 1

3

它会出现（我以前见过这个问题，实际上我要给出的解决方案来自我在另一个图像滑块上遇到同样的问题），“销毁”命令并没有完全破坏滑块。在这种情况下，一个“简单”的做法是提前保存滑块的备份克隆，然后在销毁后用它来替换你的滑块。

例子：

//create slider if page is wide
jQuery(document).ready(function(){
    sliderClone = jQuery('.bxslider').clone(); // here we create our clone to hold on to original HTML
    if (window.innerWidth > 502) {
...... some time later .................
    sliderActive = false;
    slider.replaceWith(sliderClone.clone()); // here i replace the "tampered" HTML with a clone of the "original" that we cloned off for safe keeping earlier

另外，正如我之前在评论中提到的。BXSlider 创建它包裹在你的 UL 周围的 div。因此，如果您想要在较小时使用完全不同的样式，那么只需将您的 UL 包装在一个带有 ID 开头的 div 中，然后为该 DIV > UL 编写直接样式。

例子：

HTML

<div id="myBXSlider">
    <ul class="bxslider">
        <li>
           ......

CSS

// the following first applies to the "slider" when active, 
// using bx-slider's class structure
.bx-viewport {
    margin: 0;
}

.bx-viewport h2 {
    margin-top: 1em;
}

.bx-viewport li {
    list-style: none;
    padding: 0 1em;
    margin: 1%;
    background-color: #eee;
    -moz-box-shadow: 0 0 10px #bbb;
    -webkit-box-shadow: 0 0 10px #bbb;
    box-shadow: 0 0 10px #bbb;
    border: solid #919396 2px;
}
// now for custom styling for when it's just our div then list
#myBXSlider > ul {
    display: block;
    margin: 0 auto;
}
#myBXSlider > ul li {
    background: #FFA;
    color: #F00;
    padding: .5em 1em;
}
#myBXSlider > ul h2 {
    font-style: italic;
}
// etc... etc ..... and so on
于 2013-04-29T17:23:35.077 回答