显示 jCarouselLite 中的位置

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

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

如何获取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 脚本的更多信息，请尝试放置alert(curr);或 console.log(curr);在每个“if(o.”区域之后。如果一切顺利，您将获得当前幻灯片的索引。