jQueryjavascriptスライダーに問題があります。
基本的に、このサイトのスライダーに問題があります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);