Question

我想要的效果是当幻灯片处于活动状态时，相应的幻灯片按钮（幻灯片容器外部）会更改CSS。

我希望这会让网站更易于理解;查看幻灯片和相应的按钮更改。

HTML

<!-- BUTTON -->
<a href="#" data-cycle-context=".mySlideshows" 
            data-cycle-cmd="goto" 
            data-cycle-arg="0"> SLIDE 0 
</a>

<!-- SLIDE -->
<div class="mySlideshows" data-cycle-slides="> div">
    <div id="slide-0"> SOME TEXT </div>

CSS
.active { color: red; }

JS
$( '.mySlideshows' ).cycle(

    // Can I change the active CSS rule 
    // here with Cycle's options?

    // When SLIDE 0 is active
    // Change  to have the active class (.active)

);

Answer 1

使用Cycle 2的寻呼机功能来处理这将是最简单的方法。它非常灵活，不应要求您在每张幻灯片上指定寻呼机模板。这是示例html：

<div class="mySlideshows">
    <div><p>Slide text...</p></div>
    <div><p>Slide text...</p></div>
    <div><p>Slide text...</p></div>
</div>

<ul id="custom-pager"></ul>

JavaScript：

$('.mySlideshows').cycle({
    slides: '> div',
    pager: '#custom-pager',
    pagerTemplate: '<li><a href="">Slide {{slideNum}}</a></li>',
    pagerActiveClass: 'active'
});

和更新的小提琴：http://jsfiddle.net/gS8LE/5/

如果你只需要你的寻呼机链接来显示幻灯片编号，这种方法很有效。但是，可以轻松修改它以在每个幻灯片的寻呼机链接中显示自定义文本。您只需将数据属性放在幻灯片上即可。它可以被称为任何东西，只要它以'data-cycle-'开头。这是修改后的html：

<div class="mySlideshows">
    <div data-cycle-pager-title="Custom link text">
        <p>Slide text...</p>
    </div>
    <div data-cycle-pager-title="Another link">
        <p>Slide text...</p>
    </div>
    <div data-cycle-pager-title="Final link">
        <p>Slide text...</p>
    </div>
</div>

更新的JavaScript：

$('.mySlideshows').cycle({
    slides: '> div',
    pager: '#custom-pager',
    pagerTemplate: '<li><a href="">{{pagerTitle}}</a></li>',
    pagerActiveClass: 'active'
});

以下是此设置的小提琴：http://jsfiddle.net/gS8LE/4/

Answer 2

点击锚点后，您可以从active中的所有锚点中删除类ul.nav，并仅将此类active添加到点击的锚点：

$('ul.nav li a').click(function () {
    $('ul.nav li a').removeClass('active');
    $(this).addClass('active');
});

<强> Updated Fiddle

Answer 3

基本上（而且它很混乱）你必须创建一个寻呼机div，并在每张幻灯片中添加一个自定义寻呼机模板。然后使用CSS规则处理活动幻灯片。

它有很多内联循环数据属性。但它有效！

http://jsfiddle.net/gS8LE/3/

<div data-cycle-pager-template="<li><a href=# data-cycle-cmd=goto data-cycle-arg=0>SLIDE 1</a> </li>">
<p>Slide Content</p>
</div>

<div id="custom-pager"></div>


    CSS
        .cycle-pager-active {
            background-color: red;
        }

注意：使用data-cycle-pager-template时，您必须删除所有引用。

在Cycle2中更改幻灯片时更改CSS

3 个答案: