0

我正在使用 Cycle2 构建一个轮播画廊，并且在设置寻呼机按钮的样式方面遇到了一些问题。我收集到的是 Cycle2 为每张幻灯片创建了自己的分页器跨度标签，这很糟糕，因为我已经设置了子导航标记的样式。只要我可以将各个类分配给跨度并相应地更改我的css，这应该是一个小问题。

但是，我无法让它工作。

TLDR：我希望我可以使用 pagerAnchorBuilder 为每个跨度创建单独的类。我不能。帮助。

原始标记（在 Cycle2 之前）如下所示：

<div id ="sub-nav" class="sub-nav">
    <ul>
        <li><a id="available" class="available" href="#"></a></li>
        <li><a id="reliable" class="reliable" href="#"></a></li>
        <li><a id="use" class="use" href="#"></a></li>
        <li><a id="reports" class="reports" href="#"></a></li>
        <li class="last"><a id="software" class="software" href="#"></a></li>
    </ul>       
</div>

<div id="sliding-gallery" class="sliding-gallery home-content">
    <ul>
        <li>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
            <section>
            <h2>Lorem ipsum dolor</h2>
            <p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
            <a href="#">Read More</a>
            </section>
        </li>
        <li>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
            <section>
            <h2>Lorem ipsum dolor</h2>
            <p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
            <a href="#">Read More</a>
            </section>
        </li>
    </ul>
    <span id="#prev" class="prev">Previous</span>
    <span id="#next" class="next">Next</span>                   
</div>

使用 Cycle2 它看起来像这样（注意添加了 span 标签）

<div id ="sub-nav" class="sub-nav">
    <ul>
        <li><a id="available" class="available" href="#"></a></li>
        <li><a id="reliable" class="reliable" href="#"></a></li>
        <li><a id="use" class="use" href="#"></a></li>
        <li><a id="reports" class="reports" href="#"></a></li>
        <li class="last"><a id="software" class="software" href="#"></a></li>
    </ul>
<span class="cycle-pager-active">•&lt;/span><span>•&lt;/span><span>•&lt;/span><span>•&lt;/span><span>•&lt;/span></nav>         
</div>

<div id="sliding-gallery" class="sliding-gallery home-content">
    <ul>
        <li>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
            <section>
            <h2>Lorem ipsum dolor</h2>
            <p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
            <a href="#">Read More</a>
            </section>
        </li>
        <li>
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg">
            <section>
            <h2>Lorem ipsum dolor</h2>
            <p>Sed augue lacus pretium vitae molestie eget rhoncus quis elit. Fusce orci wisi vel ipsum in p</p>
            <a href="#">Read More</a>
            </section>
        </li>
    </ul>
    <span id="#prev" class="prev">Previous</span>
    <span id="#next" class="next">Next</span>                   
</div>

周期2

$('#sliding-gallery ul').cycle({ 
    fx:     'carousel',
    carouselVisible: 1,     
    speed:  'fast', 
    timeout: 10000,
    slides: '>li',      
    next:   '.next', 
    prev:   '.prev',
    pager:  '.sub-nav',
    pagerAnchorBuilder: function(idx, slide) { 
        return '.sub-nav span:eq(' + idx + ')';
    }
});
4

1 回答 1

3

我希望你正在寻找类似于这个演示的东西

jQuery(document).ready(function($){

var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
    // advance the other slideshow
    slideshows.not(this).cycle('goto', opts.currSlide);
});

$('#cycle-2 .cycle-slide').click(function(){
    var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
    slideshows.cycle('goto', index);
});

});

您也可以在cycle2 网站上找到上述小提琴代码

你能为此提供你的小提琴吗？

于 2013-06-26T10:18:09.847 回答