Cycle2 插件隐藏/显示按钮 jQuery答案

【问题标题】：Cycle2 Plugin Hide/Show buttons jQueryCycle2 插件隐藏/显示按钮 jQuery
【发布时间】：2013-03-22 15:17:35
【问题描述】：

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

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

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

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 方面不是最好的，所以任何人都可以帮助或给我任何指导吗？

【问题讨论】：

标签： controls show-hide jquery-cycle

【解决方案1】：

在这种情况下，您将希望在添加事件处理程序之后通过代码初始化幻灯片。删除 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();

【讨论】：