Question

我在博客网站上使用过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所以任何人都可以帮助或给我任何指导吗？

Answer 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();

Cycle2插件隐藏/显示按钮jQuery

1 个答案: