jQuery滑块问题:如何删除此效果?

时间:2011-12-30 13:29:04

标签: javascript jquery slider carousel

我正在调整最初有10个缩略图的jQuery滑块。我只需要4并且我已经调整它们以适应空间但是jQuery中的某些东西迫使它们在缩略图之间移动时从左向右略微前进。我拍了一张截图,以便你可以看到我的意思。 http://awesomescreenshot.com/0edr1flb7我需要屏幕截图中的蓝色框在大图像下方保持静态。

jQuery如下:

(function (a) {
a.fn.spiderSlider = function (b) {
    var c = {
        speed: 700,
        pauseTime: 5000,
        spiderCache: true,
        autoPlay: true,
        spiderTimer: true,
        keyboardNav: true,
        currentSlide: 0
    };
    var b = a.extend(c, b);
    this.each(function () {
        var z = b.currentSlide,
            v = a(this),
            h = v.find(".button"),
            E = h.find(".buttonCover"),
            w = h.width(),
            B = v.find(".slider"),
            j = h.find(".thumb"),
            l = v.find(".cover"),
            f = h.find(".cache"),
            g = f.find(".filler"),
            s = f.width(),
            e = l.find(".item"),
            C = v.find(".next"),
            A = v.find(".prev"),
            n = v.find(".auto"),
            o = e.length,
            D = j.outerWidth(true),
            t = e.width(),
            r = e.height(),
            y = b.speed,
            m = b.spiderTimer,
            q = b.spiderCache,
            x = b.pauseTime,
            d = b.keyboardNav,
            p = false;
        E.width(o * D);
        l.width(o * t);
        k(0);
        if (b.autoPlay) {
            i(true)
        }
        j.click(function () {
            if (p) {
                n.trigger("click")
            }
            k(j.index(this), t)
        });
        n.click(function () {
            if (!p) {
                i(true)
            } else {
                u(true)
            }
        });
        C.click(function () {
            if (p) {
                u(true)
            }
            if (z < (o - 1)) {
                k(z + 1)
            } else {
                k(0)
            }
        });
        A.click(function () {
            if (p) {
                u(true)
            }
            if (z < 1) {
                k(o - 1)
            } else {
                k(z - 1)
            }
        });

        function i(F) {
            if (F) {
                a(".isPaused").stop(true, true).css("bottom", "-40px").show();
                a(".isPlaying").stop(true, true).animate({
                    bottom: "0px"
                }, function () {
                    a(".isPlaying").fadeOut(1000, function () {
                        a(".isPlaying").css("bottom", "-40px").show()
                    })
                })
            }
            p = true;
            n.removeClass("play").addClass("pause");
            if (m) {
                g.css("width", "0px").animate({
                    width: s
                }, x)
            }
            m = window.setInterval(function () {
                u(false);
                if (z < (o - 1)) {
                    k(z + 1)
                } else {
                    k(0)
                }
                i(false);
                if (m) {
                    g.stop(true, true).css("width", "0px").animate({
                        width: s
                    }, x)
                }
            }, x)
        }
        function u(F) {
            if (F) {
                a(".isPlaying").stop(true, true).css("bottom", "-40px").show();
                a(".isPaused").stop(true, true).animate({
                    bottom: "0px"
                }, function () {
                    a(".isPaused").fadeOut(1000, function () {
                        a(".isPaused").css("bottom", "-40px").show()
                    })
                })
            }
            p = false;
            if (m) {
                g.stop(true, false).animate({
                    width: "0px"
                })
            }
            n.removeClass("pause").addClass("play");
            window.clearInterval(m)
        }
        if (d) {
            a(document).keyup(function (F) {
                if (F.target.tagName.match("TEXTAREA|INPUT|SELECT")) {
                    return
                }
                switch (F.which) {
                case 39:
                    C.trigger("click");
                    break;
                case 37:
                    A.trigger("click");
                    break;
                case 32:
                    n.trigger("click");
                    break
                }
            })
        }
        function k(F) {
            l.stop(true, true).animate({
                left: -t * (F)
            }, y);
            a(".active", v).removeClass("active");
            var G = j.eq(F);
            G.addClass("active");
            z = F;
            if (q) {
                f.stop(true, true).animate({
                    marginLeft: D * (F)
                }, y, function () {
                    if (-D * (F) + (w / 2) > 0) {
                        E.stop(true, true).animate({
                            left: 0
                        }, y)
                    } else {
                        if (-D * (F) - (w / 2) < -(o * D)) {
                            E.stop(true, true).animate({
                                left: -(o * D) + w
                            }, y)
                        } else {
                            E.stop(true, true).animate({
                                left: -D * (F + 0.5) + (w / 2)
                            }, y)
                        }
                    }
                })
            } else {
                f.stop(true, true).animate({
                    marginLeft: D * (F)
                }, y);
                if (-D * (F) + (w / 2) > 0) {
                    E.stop(true, true).animate({
                        left: 0
                    }, y)
                } else {
                    if (-D * (F) - (w / 2) < -(o * D)) {
                        E.stop(true, true).animate({
                            left: -(o * D) + w
                        }, y)
                    } else {
                        E.stop(true, true).animate({
                            left: -D * (F) + (w / 2)
                        }, y)
                    }
                }
            }
        }
    })
}
})(jQuery);

1 个答案:

答案 0 :(得分:0)

我实际上能够通过css hack获得所需的效果。我添加了.buttonCover {left:0!important;对于jquery正在操纵的div而言,这就是诀窍!