Question

我正在使用一个名为jFlow的非常可爱且简单的插件，它为我提供了一个基本的内容滑块等。但是，我看不到任何文档或有关如何在同一时间在一个页面上获得两个（或更多）的帮助彼此分开。

目前，如果我设置了两个，它们几乎合并为一个，尽管彼此具有不同的配置。

任何帮助都会很棒，谢谢。迈克尔。

Answer 1

我刚刚与此作斗争，正如蒂姆所说，他们的关键是使用类，单独的ID并在每个jFlow实例中定义所有内容，如下所示：

$(function() {
        $("#controller1").jFlow({
            controller: ".jFlowControl1",
            slides: "#slides1",
            slideWrapper : "#jFlowSlide1",
            width: "300px",
            height: "280px",
            prev: ".jFlowPrev1",
            next: ".jFlowNext1"
        });
        $("#controller2").jFlow({
            controller: ".jFlowControl2",
            slides: "#slides2",
            slideWrapper : "#jFlowSlide2",
            width: "300px",
            height: "280px",
            prev: ".jFlowPrev2",
            next: ".jFlowNext2"
        });
        $("#controller3").jFlow({
            controller: ".jFlowControl3",
            slides: "#slides3",
            slideWrapper : "#jFlowSlide3",
            width: "300px",
            height: "280px",
            prev: ".jFlowPrev3",
            next: ".jFlowNext3"
        });
    });

滑块看起来像这样：

<div id="controller1" class="hidden">
    <span class="jFlowControl1">No 1</span>
    <span class="jFlowControl1">No 2</span>
    <span class="jFlowControl1">No 3</span>
</div>
<div id="slides1">
        <img src="images/1.jpg" />
        <img src="images/2.jpg" />
        <img src="images/3.jpg" />
</div>

<!-- second controller and slides -->
<div id="controller2" class="hidden">
    <span class="jFlowControl2">No 1</span>
    <span class="jFlowControl2">No 2</span>
    <span class="jFlowControl2">No 3</span>
</div>
<div id="slides2">
    <img src="images/1.jpg" />
    <img src="images/2.jpg" />
    <img src="images/3.jpg" />
</div>

<!-- third controller and slides -->
<div id="controller3" class="hidden">
    <span class="jFlowControl3">No 1</span>
    <span class="jFlowControl3">No 2</span>
    <span class="jFlowControl3">No 3</span>
</div>
<div id="slides3">
    <img src="images/1.jpg" />
    <img src="images/2.jpg" />
    <img src="images/3.jpg" />
</div>

所以几乎所有东西都有1个，2个或3个，或者你想要的jFlow滑块很多。

如果你想要上一个和下一个工作，这些将以相同的方式定义，如下所示：

<!-- first slider -->
<span class="jFlowPrev1">&lt;</span>
<span class="jFlowNext1">&gt;</span>

<!-- second slider -->
<span class="jFlowPrev2">&lt;</span>
<span class="jFlowNext2">&gt;</span>

<!-- third slider -->
<span class="jFlowPrev3">&lt;</span>
<span class="jFlowNext3">&gt;</span>

Answer 2

我所做的是创建另一个jquery.flow2.1.2文件，将其放在head部分：

并修改了必要的。这是脚本：

（function（$）{

$.fn.jFlow2 = function(options) {
    var opts = $.extend({}, $.fn.jFlow2.defaults, options);
    var randNum = Math.floor(Math.random()*11);
    var jFC = opts.controller2;
    var jFS =  opts.slideWrapper2;
    var jSel = opts.selectedWrapper2;

    var cur = 0;
    var maxi = $(jFC).length;
    // sliding function
    var slide = function (dur, i) {
        $(opts.slides2).children().css({
            overflow:"hidden"
        });
        $(opts.slides2 + " iframe").hide().addClass("temp_hide");
        $(opts.slides2).animate({
            marginLeft: "-" + (i * $(opts.slides2).find(":first-child").width() + "px")}, 
            opts.duration*(dur),
            opts.easing,
            function(){
                $(opts.slides2).children().css({
                    overflow:"auto"
                });
                $(".temp_hide").show();
            }
        );

    }
    $(this).find(jFC).each(function(i){
        $(this).click(function(){
            if ($(opts.slides2).is(":not(:animated)")) {
                $(jFC).removeClass(jSel);
                $(this).addClass(jSel);
                var dur = Math.abs(cur-i);
                slide(dur,i);
                cur = i;
            }
        });
    }); 

    $(opts.slides2).before('<div id="'+jFS.substring(1, jFS.length)+'"></div>').appendTo(jFS);

    $(opts.slides2).find("div").each(function(){
        $(this).before('<div class="jFlowSlideContainer2"></div>').appendTo($(this).prev());
    });

    //initialize the controller
    $(jFC).eq(cur).addClass(jSel);

    var resize = function (x){
        $(jFS).css({
            position:"relative",
            width: opts.width,
            height: opts.height,
            overflow: "hidden"
        });
        //opts.slides or #mySlides container
        $(opts.slides2).css({
            position:"relative",
            width: $(jFS).width()*$(jFC).length+"px",
            height: $(jFS).height()+"px",
            overflow: "hidden"
        });
        // jFlowSlideContainer
        $(opts.slides2).children().css({
            position:"relative",
            width: $(jFS).width()+"px",
            height: $(jFS).height()+"px",
            "float":"left",
            overflow:"auto"
        });

        $(opts.slides2).css({
            marginLeft: "-" + (cur * $(opts.slides2).find(":eq(0)").width() + "px")
        });
    }

    // sets initial size
    resize();

    // resets size
    $(window).resize(function(){
        resize();                         
    });

    $(opts.prev2).click(function(){
        if ($(opts.slides2).is(":not(:animated)")) {
            var dur = 1;
            if (cur > 0)
                cur--;
            else {
                cur = maxi -1;
                dur = cur;
            }
            $(jFC).removeClass(jSel);
            slide(dur,cur);
            $(jFC).eq(cur).addClass(jSel);
        }
    });

    $(opts.next2).click(function(){
        if ($(opts.slides2).is(":not(:animated)")) {
            var dur = 1;
            if (cur < maxi - 1)
                cur++;
            else {
                cur = 0;
                dur = maxi -1;
            }
            $(jFC).removeClass(jSel);
            slide(dur, cur);
            $(jFC).eq(cur).addClass(jSel);
        }
    });
};

$.fn.jFlow2.defaults = {
    controller2: ".jFlowControl2", // must be class, use . sign
    slideWrapper2 : "#jFlowSlide2", // must be id, use # sign
    selectedWrapper2: "jFlowSelected2",  // just pure text, no sign
    easing: "swing",
    duration: 400,
    width: "100%",
    prev2: ".jFlowPrev2", // must be class, use . sign
    next2: ".jFlowNext2" // must be class, use . sign
};
})(jQuery);

它有效，你在一个页面上有多个滑块：）

Answer 3

问题在于它没有设置为多个。

您不能拥有两个具有相同ID的元素，因此请尽可能将事物转换为使用您找到它们的类（

$(function() {
    $("div#controller").jFlow({
        slides: "#slides", <-- try this as .slides
        width: "980px",
        height: "313px"
    });
});

这个脚本有许多好的替代品，值得考虑。 jCarousel，一个。

http://sorgalla.com/jcarousel/

jQuery jFlow插件。如何在一个页面上拥有多个？

3 个答案: