Question

我通过覆盖CSS为我的滑块使用自定义背景：

.ui-widget-content {background: transparent url(../img/bg.png) no-repeat;}

滑块的行为受以下因素控制：

$(document).ready(function() {
    $(".myslider5").slider({
        animate: "true",
        step: 1,
        min: -1950,
        max: 1950,
        value: 0,
        slide: function(event, ui) {
               // magic happens here
        }
    });
    $(".myslider3").slider({
        animate: "true",
        step: 1,
        min: -1350,
        max: 1350,
        value: 0,
        slide: function(event, ui) {
               // magic happens here
        }
    });

因此，myslider5和myslider3是两个类。但他们的背景图片需要不同。我该怎么做呢？

Answer 1

<强>更新：

DEMO http://jsbin.com/itivu3

消息来源 http://jsbin.com/itivu3/edit

注意：请注意您提出的问题， change image dynamically on slide!!!

Answer 2

我明白了。出于某种原因，aSeptik的建议没有奏效。它必须在CSS部分调整，而不是在JS中。

.myslider5.ui-widget-content {background: transparent url(../img/slider5.png);}
.myslider3.ui-widget-content {background: transparent url(../img/slider3.png);}

jQuery滑块小部件背景 - 动态更改

2 个答案: