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