0

我在博客网站上使用了 jQuery cycle2 插件。我想要幻灯片做的是当显示超过 1 个图像时，控件将显示-在它们通过 css 隐藏的那一刻。

通过在我的标头中声明它来使用该插件（这里是 js 文件的链接：http: //malsup.github.com/jquery.cycle2.js

然后我的 css 包含一个用于幻灯片容器的类、一个用于按钮容器的类以及一个用于 prev 和 next 按钮的类：

CSS：

.cycle-slideshow {
    height:400px;
    z-index:0;
}

.cycle-slideshow  img{
    width:100%;
    height:100%;
    z-index:3;
}

.center {
 display:none;  
}

.center a{
    z-index:4;
    position:absolute;
    margin-top:-48px;
}

.center a:hover {
    display:block;
}


.center a#prev, .center a#next{
    position:relative;
    width:4%;
    height:60px;
    width:60px;
    margin-top:-60px;
    font-size:40px;
    text-align:center;  
    color:#FFF;

}

.center a#next{
    float:right;
    background:url(images/next.png) center -2px no-repeat;
}

.center a#prev {
        float:left;
    background:url(images/prev.png) center -2px no-repeat;
}

我的 html 代码实际上嵌入在 wordpress 函数中，但 html 格式如下：

<div class="cycle-slideshow"
    data-cycle-fx="scrollHorz"
    data-cycle-pause-on-hover="true"
    data-cycle-speed="200"
    data-cycle-next="#next"
    data-cycle-prev="#prev"
    data-cycle-swipe="true">

    //does stuff here
    </div>
    <div class="center">
        <a href="javascript:void(0);" id="prev">&nbsp;</a> 
        <a href="javascript:void(0);" id="next">&nbsp;</a>
    </div>

我被告知要执行以下代码（前三行），但这似乎仍然不起作用。

$(document).ready(function () {   
            $('.cycle-slideshow').on( 'cycle-initialized', function( e, opts ) {
            if ( opts.slideCount > 1 ) {
                $(".center").css("display", "block");
            }
    });
});

我不是最好的 jQuery，所以任何人都可以帮助或给我任何指导吗？

4

1 回答 1

0

在这种情况下，您将希望在添加事件处理程序之后通过代码初始化幻灯片。删除cycle-slideshow 该类，使其不会自动初始化，然后您可以执行以下操作：

演示：http: //jsfiddle.net/lucuma/zyhrK/1/

$('.slideshow').on('cycle-initialized', function (e, opts) {
    if (opts.slideCount > 1) {
        $(".center").css({
            "display": "block"
        });
    }
});

$('.slideshow').cycle();
于 2013-04-09T20:59:28.817 回答