Question

我正在使用jcarousellite作为一个简单的JQuery轮播，但我想稍微改变一下，以便将图像隐藏到最左边和最右边的项目中，但显示在中间项目上。

要做到这一点，我需要能够在任何时候找到视口中显示的列表项。我已经尝试在源代码中挖掘并使用包含的回调，但我不能得到与所显示的项目相符的索引号。

有没有人对此有任何经验或想法如何解决？

修改

确定在某种程度上解决了这个问题，但它仍然无法正常工作。 afterEnd函数内置于插件中，并提供当前可见项的对象。我用它来提供列表元素的ID，并应用一些转换。

问题是这是插件的“外部”，所以如果我启用自动滚动，则忽略所有这些代码。我需要一些方法将这些代码插入到插件中的函数中，这就是我害怕的地方。

    $(".ccvi-carousel").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    speed:  800,
    //auto: 2000,
    afterEnd: function(a) { 
        if (start=true) {
            $('li#1 .cf-img').hide();
        }
        left = $(a[0]).attr("id");
        mid = $(a[1]).attr("id");
        right = $(a[2]).attr("id");
        $('.prev').click(function() {
            $('li#' + left + ' .cf-img').fadeIn();
            $('li#' + mid + ' .cf-img').hide();
            $('li#' + right + ' .cf-img').hide();
        });
        $('.next').click(function() {
            $('li#' + left + ' .cf-img').hide();
            $('li#' + mid + ' .cf-img').hide();
            $('li#' + right + ' .cf-img').fadeIn();
        });             
        //alert("Left:" + left + "Middle:" + mid + "Right:" + right + "");
    }
});

我认为这是我需要获取代码的插件中的函数，但我看不出它是如何工作的。

        function go(to) {
        if(!running) {

            if(o.beforeStart)
                o.beforeStart.call(this, vis());

            if(o.circular) {            // If circular we are in first or last, then goto the other end
                if(to<=o.start-v-1) {           // If first, then goto last
                    ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
                    // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
                    curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
                    //alert (curr);
                } else if(to>=itemLength-v+1) { // If last, then goto first
                    ul.css(animCss, -( (v) * liSize ) + "px" );
                    // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
                    curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
                    //alert (curr);
                } else {
                    curr = to;
                    //alert (curr);
                }
            } else {                    // If non-circular and to points to first or last, we just return.
                if(to<0 || to>itemLength-v) return;
                else curr = to;
            }                           // If neither overrides it, the curr will still be "to" and we can proceed.

            running = true;

            ul.animate(
                animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
                function() {
                    //alert (curr-2);
                    if(o.afterEnd)
                        o.afterEnd.call(this, vis());
                    running = false;
                }
            );
            // Disable buttons when the carousel reaches the last/first, and enable when not
            if(!o.circular) {
                $(o.btnPrev + "," + o.btnNext).removeClass("disabled");
                $( (curr-o.scroll<0 && o.btnPrev)
                    ||
                   (curr+o.scroll > itemLength-v && o.btnNext)
                    ||
                   []
                 ).addClass("disabled");
            }

        }
        return false;
    };

Answer 1

我认为这会对你有所帮助：

How to get the current index with jCarousel Lite?

除了上面的文章，我还将第241行设置为以下

div.css({position: "relative", "z-index": "2", left: "-1144px"}); //changed the left from 0 to -1144px to allow the carousel circle to repeat offscreen

这使整个转盘向左移动。在我的情况下，我正在移动旋转木马1144px，因为我已经设置了宽度幻灯片，但您可以轻松地动态计算左侧偏移。

现在我在屏幕左侧有2张幻灯片，我设置了.jCarouselLite（{visible：6}）;这让我在中间有两张可见的幻灯片，另外两张在屏幕右边。

接下来将以下代码放在ul.animate（）;

之后的任何位置

li.eq(curr+1).addClass("prev");
li.eq(curr+2).addClass("current");
li.eq(curr+3).addClass("next");

最后一定要将正确的索引幻灯片设置为当前。按照链接文章的指导原则，我实际上是在索引8上开始我的轮播

$(".jCarouselLite li").eq(7).addClass("prev");
$(".jCarouselLite li").eq(8).addClass("current");
$(".jCarouselLite li").eq(9).addClass("next");

尝试更多地了解上面概述的jCarousel Lite脚本，尝试放置警报（curr）;或console.log（curr）;在每个“if（o。”区域之后。如果一切顺利，你将获得当前幻灯片的索引。

显示jCarouselLite中的位置

1 个答案: