Cycle2插件隐藏/显示按钮jQuery

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

该插件使用我的头，宣布它（这里是链接到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，所以任何人都可以帮助或给我任何指导吗？

来源

2013-03-22 Shimsham84

在这种情况下，您将要通过添加事件处理函数后的代码初始化幻灯片。取下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-09 20:59:28 lucuma

Cycle2插件隐藏/显示按钮jQuery

回答

相关问题