0

我在 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)

我一直在扫描,但无法弄清楚。有人有这方面的经验吗?

4

0 回答 0