破解的jQuery滑块

时间:2012-04-21 00:06:14

标签: javascript jquery slider

我有一个jQuery javascript滑块的问题。

基本上我在此网站http://crearewebsites.co.uk/victoria/pb-metal-dev/

上有滑块问题

这是http://www.zurb.com/playground/orbit-jquery-image-slider提供的轨道滑块,我试过搜索他们的文档等,但没有帮助。

问题在于,当首次加载页面时,所有幻灯片都会快速闪烁,然后在第一张幻灯片上卡住2个周期才能正常工作。

还有一种方法可以将它强制放在图像容器后面,因为圆角应该在幻灯片动画时覆盖它们。

任何帮助,即使是最轻微的人也会非常感激,欢呼!

以下是用于调用滑块的代码:

<script src="js/jquery.orbit-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(window).load(function() {
   $('#slider').orbit({
  'timer': true,
  'advanceSpeed': 6000,     
  'bullets' : false,        
  'bulletThumbs': false,
 });

HTML

  <div id="slider-container">
     <div id="slider" class="png-fix">
        <img src="Images/energy-efficient-powder-coating-equipment.png" class="png-fix slide-img" alt="PB Metal Finishing Spray Save System" /> 
        <img src="Images/experts-in-powder-coating-equipment.png" class="png-fix slide-img" alt="Experts in Powder Coating Equipment" />
        <img src="Images/complete-turnkey-modular-powder-coating-plant-solutions.png" class="png-fix slide-img" alt="Complete modular, turnkey powder coating plant solutions." />

认为它可能是JavaScript代码中的内容:


(function(e) {
        e.fn.orbit = function(a) {
                a = e.extend({
                    animation: "horizontal-push",
                    animationSpeed: 600,
                    timer: true,
                    advanceSpeed: 4E3,
                    pauseOnHover: false,
                    startClockOnMouseOut: false,
                    startClockOnMouseOutAfter: 1E3,
                    directionalNav: true,
                    captions: true,
                    captionAnimation: "fade",
                    captionAnimationSpeed: 600,
                    bullets: false,
                    bulletThumbs: false,
                    bulletThumbLocation: "",
                    afterSlideChange: function() {}
                }, a);
                return this.each(function() {
                            function t() {
                                if (!a.timer || a.timer == "false") return false;
                                else if (u.is(":hidden")) v = setInterval(function() {
                                    o("next")
                                }, a.advanceSpeed);
                                else {
                                    r = true;
                                    A.removeClass("active");
                                    v = setInterval(function() {
                                        var d = "rotate(" + p + "deg)";
                                        p += 2;
                                        w.css({
                                            "-webkit-transform": d,
                                            "-moz-transform": d,
                                            "-o-transform": d
                                        });
                                        if (p > 180) {
                                            w.addClass("move");
                                            B.addClass("move")
                                        }
                                        if (p > 360) {
                                            w.removeClass("move");
                                            B.removeClass("move");
                                            p = 0;
                                            o("next")
                                        }
                                    }, a.advanceSpeed / 180)
                                }
                            }

                            function q() {
                                if (!a.timer || a.timer == "false") return false;
                                else {
                                    r = false;
                                    clearInterval(v);
                                    A.addClass("active")
                                }
                            }

                            function C() {
                                if (!a.captions || a.captions == "false") return false;
                                else {
                                    var d = c.eq(b).data("caption");
                                    if (_captionHTML = e(d).html()) {
                                        l.attr("id", d).html(_captionHTML);
                                        a.captionAnimation == "none" && l.show();
                                        a.captionAnimation == "fade" && l.fadeIn(a.captionAnimationSpeed);
                                        a.captionAnimation == "slideOpen" && l.slideDown(a.captionAnimationSpeed)
                                    } else {
                                        a.captionAnimation == "none" && l.hide();
                                        a.captionAnimation == "fade" && l.fadeOut(a.captionAnimationSpeed);
                                        a.captionAnimation == "slideOpen" && l.slideUp(a.captionAnimationSpeed)
                                    }
                                }
                            }

                            function D() {
                                if (a.bullets) F.children("li").removeClass("active").eq(b).addClass("active");
                                else return false
                            }

                            function o(d) {
                                function g() {
                                    c.eq(m).css({
                                        "z-index": 1
                                    });
                                    x = false;
                                    a.afterSlideChange.call(this)
                                }
                                var m = b,
                                    h = d;
                                if (m == h) return false;
                                if (c.length == "1") return false;
                                if (!x) {
                                    x = true;
                                    if (d == "next") {
                                        b++;
                                        if (b == s) b = 0
                                    } else if (d == "prev") {
                                        b--;
                                        if (b < 0) b = s - 1
                                    } else {
                                        b = d;
                                        if (mb) h = "prev"
                                    }
                                    D();
                                    c.eq(m).css({
                                        "z-index": 2
                                    });
                                    a.animation == "fade" && c.eq(b).css({
                                        opacity: 0,
                                        "z-index": 3
                                    }).animate({
                                        opacity: 1
                                    }, a.animationSpeed, g);
                                    if (a.animation == "horizontal-slide") {
                                        h == "next" && c.eq(b).css({
                                            left: k,
                                            "z-index": 3
                                        }).animate({
                                            left: 0
                                        }, a.animationSpeed, g);
                                        h == "prev" && c.eq(b).css({
                                            left: -k,
                                            "z-index": 3
                                        }).animate({
                                            left: 0
                                        }, a.animationSpeed, g)
                                    }
                                    if (a.animation == "vertical-slide") {
                                        h == "prev" && c.eq(b).css({
                                            top: y,
                                            "z-index": 3
                                        }).animate({
                                            top: 0
                                        }, a.animationSpeed, g);
                                        h == "next" && c.eq(b).css({
                                            top: -y,
                                            "z-index": 3
                                        }).animate({
                                            top: 0
                                        }, a.animationSpeed, g)
                                    }
                                    if (a.animation == "horizontal-push") {
                                        if (h == "next") {
                                            c.eq(b).css({
                                                left: k,
                                                "z-index": 3
                                            }).animate({
                                                left: 0
                                            }, a.animationSpeed, g);
                                            c.eq(m).animate({
                                                left: -k
                                            }, a.animationSpeed)
                                        }
                                        if (h == "prev") {
                                            c.eq(b).css({
                                                left: -k,
                                                "z-index": 3
                                            }).animate({
                                                left: 0
                                            }, a.animationSpeed, g);
                                            c.eq(m).animate({
                                                left: k
                                            }, a.animationSpeed)
                                        }
                                    }
                                    C()
                                }
                            }
                            var b = 0,
                                s = 0,
                                k, y, x, j = e(this).addClass("orbit"),
                                f = j.wrap('').parent();
                            j.add(k).width("1px").height("1px");
                            var c = j.children("img, a img, div");
                            c.each(function() {
                                var d = e(this),
                                    g = d.width();
                                d = d.height();
                                if (g > j.width()) {
                                    j.add(f).width(g);
                                    k = j.width()
                                }
                                if (d > j.height()) {
                                    j.add(f).height(d);
                                    y = j.height()
                                }
                                s++
                            });
                            if (c.length == 1) {
                                a.directionalNav = false;
                                a.timer = false;
                                a.bullets = false
                            }
                            c.eq(b).css({
                                "z-index": 3
                            }).fadeIn(function() {
                                c.css({
                                    display: "block"
                                })
                            });
                            if (a.timer) {
                                f.append('');
                                var u = e("div.timer"),
                                    r;
                                if (u.length != 0) {
                                    var w = e("div.timer span.rotator"),
                                        B = e("div.timer span.mask"),
                                        A = e("div.timer span.pause"),
                                        p = 0,
                                        v;
                                    t();
                                    u.click(function() {
                                        r ? q() : t()
                                    });
                                    if (a.startClockOnMouseOut) {
                                        var E;
                                        f.mouseleave(function() {
                                            E = setTimeout(function() {
                                                r || t()
                                            }, a.startClockOnMouseOutAfter)
                                        });
                                        f.mouseenter(function() {
                                            clearTimeout(E)
                                        })
                                    }
                                }
                            }
                            a.pauseOnHover && f.mouseenter(function() {
                                q()
                            });
                            if (a.captions) {
                                f.append('');
                                var l = f.children(".orbit-caption");
                                C()
                            }
                            if (a.directionalNav) {
                                if (a.directionalNav == "false") return false;
                                f.append('RightLeft');
                                var n = f.children("div.slider-nav").children("span.left"),
                                    z = f.children("div.slider-nav").children("span.right");
                                n.click(function() {
                                    q();
                                    o("prev")
                                });
                                z.click(function() {
                                    q();
                                    o("next")
                                })
                            }
                            if (a.bullets) {
                                f.append('');
                                var F = e("ul.orbit-bullets");
                                for (i = 0; i "+(i+1)+"
                                    ");if(a.bulletThumbs)if(z=c.eq(i).data("
                                    thumb ")){n=e(''+i+"
                                    ");n.css({background:"
                                    url("+a.bulletThumbLocation+z+") no - repeat "})}e("
                                    ul.orbit - bullets ").append(n);n.data("
                                    index ",i);n.click(function(){q();o(e(this).data("
                                    index "))})}D()}})}})(jQuery);

1 个答案:

答案 0 :(得分:1)

我尝试了一个示例html,它没有毛刺。 图像(在我的样本中)按照我声明<img />标记

的顺序呈现

在您的页面中,图像不会以这种方式呈现。这是图像加载/缓存的问题吗?

我尝试使用firebug / firefox进行调试。最后一个图像首先渲染。

示例HTML:

    <body>
    <div id="imgslider">
        <img src="http://www.lorempixum.com/898/270/animals" alt="" /> 
        <img src="http://www.lorempixum.com/898/270/city" alt="" /> 
        <img src="http://www.lorempixum.com/898/270/food" alt="" /> 
        <img src="http://www.lorempixum.com/898/270/sports" alt="" /> 
    </div>
    <pre>Animals -> City -> Food -> Sports</pre>
    <script type="text/javascript">
        $(window).load(
            function(){
                $('#imgslider').orbit({
            'timer': true,
            'advanceSpeed': 6000,
            'bullets' : false,
            'bulletThumbs': false, 
            });});
    </script>
</body>