Question

我正在尝试将标题附加到我的[cycle2] [1]幻灯片上的下一个和上一个按钮，并在幻灯片更改时更新它们。

我想使用API，但我无法弄清楚如何使用它。

我使用data-title="title"

将数据属性附加到每张幻灯片

当我使用next和previous时，它使用我当前的幻灯片标题

这已经有所解决。这是我更新的解决方案。

HTML

<div class="cycle-slideshow"
    data-cycle-fx="scrollHorz"
    data-cycle-timeout="0"
    data-cycle-prev="#prev"
    data-cycle-next="#next"
    data-cycle-slides=">div" 
    >
    <h1></h1>
    <div data-title="title1"><img src="http://malsup.github.com/images/p1.jpg"></div>
    <div data-title="title2"><img src="http://malsup.github.com/images/p2.jpg"></div>
    <div data-title="title3"><img src="http://malsup.github.com/images/p3.jpg"></div>
    <div data-title="title4"><img src="http://malsup.github.com/images/p4.jpg"></div>
</div>

<div class="center">
    <a href=# id="prev">Prev</a> 
    <a href=# id="next">Next</a>
</div>

的jQuery

var slideshow = $('.cycle-slideshow');
    maxSlides = slideshow.data('cycle.opts').slideCount;

slideshow.on({
    'cycle-update-view': function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
        UpdateTitles();
    }
});

function UpdateTitles(){
    var currentSlide = slideshow.data('cycle.opts').currSlide;
    activeSlide = $(".cycle-slide-active");
    activeTitle = activeSlide.data('title');

    if(currentSlide == 0){
        nextTitle = activeSlide.next().data('title');
        prevTitle = $(".cycle-slide").eq(maxSlides).data('title');
    }
    else if(currentSlide == maxSlides-1){
        prevTitle = activeSlide.prev().data('title');
        nextTitle = $(".cycle-slide").eq(0).data('title');
    }
    else {
        nextTitle = activeSlide.next().data('title');
        prevTitle = activeSlide.prev().data('title');
    }

    $('h1').html(activeTitle);
    $('#prev').html("Previous: "+prevTitle);
    $('#next').html("Next: "+nextTitle);
}

UpdateTitles();

jQuery-cycle2插件|在下一个和上一个按钮上滑动标题

0 个答案: