Question

我正在使用jCarousel插件。

我想要做的是当我点击用于导航轮播的列表项时，转到该类名的第一个索引。如果我点击<ul id="bah">中的两个，它应该转到类名 level-2 中的第一个出现，在我的情况下，它将是 jcarouselindex = “4”

我很确定这行jQuery('#mycarousel').jcarousel('scroll', index + 1);，但我不知道如何将index更改为类名的第一次出现。

我能想到的唯一漫长的方式是计算课程中有多少项目，所以在我的情况下它会是2，然后在导航<ul>中给每个列表项目一个id，所以第一个<li>为<li id="1">，第二个为<li id="4">等，然后使用id作为索引。

只需要一些最简单的方法来做到这一点

jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        wrap: 'null',
        scroll: 1,
        visible: 4
    });

     // Loop through all images and attach click action
    jQuery("#bah li").each( function(index, element)
    {
        $(element).click( function()
        {
            jQuery('#mycarousel').jcarousel('scroll', index + 1);
        });
    }); 
});

chghh

<ul id="bah">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
    <li jcarouselindex="1" class="jcarousel-item jcarousel-item-horizontal level-1"><img src="test/craft-link.png" alt="" width="194" height="74"></li>
    <li jcarouselindex="2" class="jcarousel-item jcarousel-item-horizontal level-1"><img src="test/conservation-link.png" alt="" width="194" height="74"></li>
    <li jcarouselindex="3" class="jcarousel-item jcarousel-item-horizontal level-1"><img src="test/contemporary-link.png" alt="" width="194" height="74"></li>
    <li jcarouselindex="4" class="jcarousel-item jcarousel-item-horizontal level-2"><img src="test/craft-link.png" alt="" width="194" height="74"></li>
    <li jcarouselindex="5" class="jcarousel-item jcarousel-item-horizontal level-2"><img src="test/conservation-link.png" alt="" width="194" height="74"></li>
    <li jcarouselindex="6" class="jcarousel-item jcarousel-item-horizontal level-3"><img src="test/contemporary-link.png" alt="" width="194" height="74"></li>
    <li jcarouselindex="7" class="jcarousel-item jcarousel-item-horizontal level-3"><img src="test/craft-link.png" alt="" width="194" height="74"></li>
    <li jcarouselindex="8" class="jcarousel-item jcarousel-item-horizontal level-3"><img src="test/conservation-link.png" alt="" width="194" height="74"></li>
    <li jcarouselindex="9" class="jcarousel-item jcarousel-item-horizontal level-4"><img src="test/contemporary-link.png" alt="" width="194" height="74"></li>
    <li jcarouselindex="10" class="jcarousel-item jcarousel-item-horizontal level-5"><img src="test/craft-link.png" alt="" width="194" height="74"></li>

</ul>

Answer 1

您可以尝试使用：gt（）选择器 - ＆gt; http://api.jquery.com/gt-selector/

var idToScroll = $(".level-2:gt(index)).attr("jcarouselindex");

jQuery('#mycarousel').jcarousel('scroll', idToScroll);

或类似的东西。

问候。

jCarousel：滚动到类名的第一项索引

1 个答案: