1

我尝试以下方法：

一个ul用于链接，另一个用于幻灯片

<ul class="infoslider">
        <li><a data-orbit-link="slidegroup1" href="#">Slides1</a></li>
        <li><a data-orbit-link="slidegroup2" href="#">Slides2</a></li>
    </ul>

<ul id="infoslider">
    <li class=""        data-orbit-slide="slidegroup1">  <img src="img1.png" ></li>
    <li class="active"  data-orbit-slide="">             <img src="img2.png" ></li>
    <li class=""        data-orbit-slide="slidegroup2">  <img src="img3.png" ></li>
    <li class=""        data-orbit-slide="">             <img src="img4.png" ></li>
</ul>

要单击“下一步”的字段

<a class="orbit-next" href="#">Next</a>

我点击“orbit-next”来转发幻灯片。

使用 JQuery 我检查#infoslider li data-orbit-slide- 属性。如果它是空的，它会向上遍历，直到找到一个字符串。然后它添加相应ul.infoslide li的活动类。

$j("a.orbit-next").click(function() {

    //select the active li
    var test = $j("#infoslider > li.active");

    //test, if there is a string in "data-orbit-slide"
    if (test.attr("data-orbit-slide").length > 0) {     
        var link = test.attr("data-orbit-slide");
        } else {        
        //if not, get the elements
        var term1 = document.getElementById('infoslider');
        //and traverse up until a string is found
        var link = $j("#infoslider li.active").prevUntil(term1,"li[data-orbit-slide!='']").attr("data-orbit-slide");        
        }       

        //select the coresponding a in div.infoslider
        var target = $j("a[data-orbit-link='" + link + "']").parent();  

        //remove the classes active
        $j("div.infoslider > ul > li").removeClass("active");
        //add the active class
        target.addClass("active");
});

这几乎可以正常工作。但：

  1. ul.infoslider li 总是“落后”。即当幻灯片img3.png 出现时，活动类仍在“slidegroup1”上。直到“img4.png”出现“slidegroup2”才获得活动类。为什么？它与 JQuery/Orbit-Slider/my JQuery 执行的事件顺序有关吗？
  2. 有没有更简单的方法来实现我想要的？

在此先感谢您的帮助。

4

2 回答 2

0

尝试以下操作，您的代码应该可以正常工作。

target.next().addClass("active");

作为替代实现，您可以使用 Jquery data() 实用程序来存储活动幻灯片信息。这样可以避免遍历列表。我做了一些优化，这样就可以避免多次 DOM 遍历。

这是代码片段。

$(function () {
    //select the active li
    var $activeSlide = $("#infoslider > li.active");
    $("a.orbit-next").click(function () {
        if (!$activeSlide.length) { return; }
        var $nextSlide = $activeSlide.next();
        if (!$nextSlide.length) { return; }

        var slideGroup;
        //test, if there is a string in "data-orbit-slide"
        if ($nextSlide.attr("data-orbit-slide").length > 0) {
            slideGroup = $nextSlide.attr("data-orbit-slide");
            $(this).data("slideGroup", slideGroup);
        } else {
            slideGroup = $(this).data("slideGroup");
        }

        //remove the classes active
        $("ul.infoslider > li").removeClass('active');
        //select the coresponding a in div.infoslider
        $("a[data-orbit-link='" + slideGroup + "']").parent().addClass("active");
        $activeSlide.removeClass("active");
        $nextSlide.addClass("active");
        $activeSlide = $nextSlide;
    });
})
于 2013-04-23T00:04:22.987 回答
0

结果如下：

//select the active li
var activeSlide = $j("#infoslider > li.active");
//populate with data, otherwise at the first click there is no data
slideStart = activeSlide.attr("data-orbit-slide");

$j("a.orbit-next").click(function () {

    //check if second-last-child, cause the slider is looping
    //2nd-child, 2nd-last, cause Orbit is cloning the first and the last slide
    if (activeSlide.is(":nth-last-child(2)") ) {
        var nextSlide = $j("#infoslider > li:nth-child(2)");
    } else {
        var nextSlide = activeSlide.next();
    }

    var slideGroup;
    //test, if there is a string in "data-orbit-slide"
    //not very elegant, but had no idea how to initiate the var slideGroup...
    if (nextSlide.attr("data-orbit-slide").length == 0 && slideStart.length > 0) {
        slideGroup = slideStart;
        slideStart = "";
    } else if(nextSlide.attr("data-orbit-slide").length > 0 && slideStart == ""){
        slideGroup = nextSlide.attr("data-orbit-slide");
        $(this).data("slideGroup", slideGroup);
    } else {
        slideGroup = $(this).data("slideGroup");
    }


    //remove the classes active
    $j("div.infoslider > ul > li").removeClass('active');
    //select the coresponding a in div.infoslider
    $j("a[data-orbit-link='" + slideGroup + "']").parent().addClass("active");
    activeSlide = nextSlide;
});
于 2013-04-23T17:49:21.707 回答