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

回答

相關問題