在jCarouselLite中显示位置
我正在使用jcarousellite作为一个简单的JQuery旋转木马，但我想稍微改变一下，以便将图像隐藏到最左边和最右边的项目，但显示在中间项目上。
为此，我需要能够在任何时候找到视口中显示的列表项。 我已经尝试在源代码中挖掘并使用包含的回调，但我无法获得与所显示的项目相符的索引号。
有没有人有这方面的经验或如何解决它的想法？
编辑
OK在某种程度上解决了这个问题，但它仍然无法正常工作。 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 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(toitemLength-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 itemLength-v && o.btnNext) || [] ).addClass("disabled"); } } return false; };
我想这会对你有所帮助：
如何使用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}）; 这给了我2个可见的幻灯片在中间，另外两个在屏幕右侧。
接下来将以下代码放在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。”区域之后。如果一切顺利，你将获得当前幻灯片的索引。