我在 wordpress 插件中使用 jFlow 滑块。在他的说明中,它说要实现此代码
[jflow]
[jflowslide imgpath="FullPathOfImage" imgalt="ImageAlt" heading="HeadingOfSlide" slidetext="SlideText" linktitle="LinkTitle"]
[/jflow]
使用这些指南其中 [jflow] 和 [/jflow] 分别是 jFlow Plus 滑块的开头和结尾,继续添加尽可能多的 [jflowslide imgpath="FullPathOfImage" imgalt="ImageAlt" heading="HeadingOfSlide" slidetext="SlideText" linktitle="LinkTitle"] 用于您想要的任意数量的幻灯片。
它工作正常,但我似乎无法让它显示超过 3 张幻灯片
这是PHP
<script language="javascript">
$(document).ready(function(){
$("#jFlowController").jFlow({
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlider", // must be id, use # sign
slides: "#jFlow", // the div where all your sliding divs are nested in
selectedWrapper: "jFlowSelected", // just pure text, no sign
timer_slider: <?php echo $time_slider ?>, // time in miliseconds to display one slide
width: "<?php echo $width ?>px", // this is the width for the content-slider
height: "<?php echo $height ?>px", // this is the height for the content-slider
duration: <?php echo $time ?>, // time in miliseconds to transition one slide
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext", // must be class, use . sign
auto: <?php if (get_option("jflow_plus_display") == 'yes'){ ?>true<?php } else {?>false<?php }?>
});
});
</script>
<style type="text/css">
#jFlowcontainer{
width: <?php echo $width ?>px;
height: <?php echo $height ?>px;
}
</style>
这是JS
(function (a) {
a.fn.jFlow = function (b) {
var c = a.extend({}, a.fn.jFlow.defaults, b);
var d = Math.floor(Math.random() * 11);
var e = c.controller;
var f = c.slideWrapper;
var g = c.selectedWrapper;
var h = c.timer_slider;
var i = 0;
var j;
var k = a(e).length;
var l = function (b, d) {
a(c.slides).children().css({
overflow: "hidden"
});
a(c.slides + " iframe").hide().addClass("temp_hide");
a(c.slides).animate({
marginLeft: "-" + (d * a(c.slides).find(":first-child").width() + "px")
}, c.duration * b, c.easing, function () {
a(c.slides).children().css({
overflow: "hidden"
});
a(".temp_hide").show()
})
};
a(this).find(e).each(function (b) {
a(this).click(function () {
p();
if (a(c.slides).is(":not(:animated)")) {
a(e).removeClass(g);
a(this).addClass(g);
var d = Math.abs(i - b);
l(d, b);
i = b
}
})
});
a(c.slides).before('<div id="' + f.substring(1, f.length) + '"></div>').appendTo(f);
a(c.slides).find("div").each(function () {
a(this).before('<div class="jFlowSlideContainer"></div>').appendTo(a(this).prev())
});
a(e).eq(i).addClass(g);
var m = function (b) {
a(f).css({
position: "relative",
width: c.width,
height: c.height,
overflow: "hidden"
});
a(c.slides).css({
position: "relative",
width: a(f).width() * a(e).length + "px",
height: a(f).height() + "px",
overflow: "hidden"
});
a(c.slides).children().css({
position: "relative",
width: a(f).width() + "px",
height: a(f).height() + "px",
"float": "left",
overflow: "hidden"
});
a(c.slides).css({
marginLeft: "-" + (i * a(c.slides).find(":eq(0)").width() + "px")
})
};
m();
a(window).resize(function () {
m()
});
a(c.prev).click(function () {
p();
n()
});
a(c.next).click(function () {
p();
o()
});
var n = function (b) {
if (a(c.slides).is(":not(:animated)")) {
var d = 1;
if (i > 0) i--;
else {
i = k - 1;
d = i
}
a(e).removeClass(g);
l(d, i);
a(e).eq(i).addClass(g)
}
};
var o = function (b) {
if (a(c.slides).is(":not(:animated)")) {
var d = 1;
if (i < k - 1) i++;
else {
i = 0;
d = k - 1
}
a(e).removeClass(g);
l(d, i);
a(e).eq(i).addClass(g)
}
};
var p = function (b) {
if (c.auto == true) {
if (j != null) clearInterval(j);
j = setInterval(function () {
a(c.next).click()
}, h)
}
};
p();
a(c.slides).hover(function () {
clearInterval(j)
}, function () {
p()
})
};
a.fn.jFlow.defaults = {
controller: "#myController",
slideWrapper: "#mySlides",
selectedWrapper: ".jFlowSelected",
timer_slider: 1e4,
auto: true,
easing: "swing",
duration: 400,
width: "100%",
prev: ".jFlowPrev",
next: ".jFlowNext"
}
})(jQuery)
我一直在扫描,但无法弄清楚。有人有这方面的经验吗?