我有一个 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);