2013-05-06 62 views
1

的寬度,我使用jQuery插件循環2 http://jquery.malsup.com/cycle2/demo/basic.phpjQuery的循環2獲得當前幻燈片

我要抓住當前幻燈片/圖像的寬度,然後用它來設置其他元素的寬度。

每個圖像可能是不同的寬度,我需要在圖像頂部的酒吧來相應地調整大小。

<div class="cycle-slideshow"> 
<img src="http://malsup.github.com/images/p1.jpg"> 
<img src="http://malsup.github.com/images/p2.jpg"> 
<img src="http://malsup.github.com/images/p3.jpg"> 
<img src="http://malsup.github.com/images/p4.jpg"> 
</div> 

我怎樣才能獲得當前/活動幻燈片的寬度?

回答

2

你可以通過這個插件將類active添加到當前活動圖像。所以,你可以像這樣以獲得您想要的寬度:

var imgWidth = $(".cycle-slideshow").find("img.active").width(); 

,那麼你可以使用這個寬度值來設置寬度爲其他元素:

$("other element selector").width(imgWidth); 

編輯

我假設您的nextprev按鈕的HTML看起來像這樣:

<div class="center"> 
    <a href="#" id="prev">Prev</a> 
    <a href="#" id="next">Next</a> 
</div> 

然後你只需要做到:

$("#prev, #next").on('click', function() { 
    var imgWidth = $('.cycle-slideshow').find(".cycle-slide-active").width(); 
    $(".topbar").width(imgWidth); 
}); 
+0

感謝。我認爲會這樣做,但是當我點擊新圖像的下一個箭頭時,「其他元素」的寬度不會更新。我猜是基於第一個活動幻燈片設置元素的寬度? – gteh 2013-05-06 11:28:19

+0

@gteh那麼我建議你把上面的代碼放在你處理下一個箭頭的點擊事件的函數中,以使它更新。 – Eli 2013-05-06 11:32:39

+0

你認爲你可以幫忙嗎?我仍然在學習jquery。 cycle2的API在這裏http://www.malsup.com/jquery/cycle2/api/我假設我會做'$('。cycle-slideshow')。on('cycle-after',function(即,選擇採用,API){ \t \t \t變種imgWidth = $($此).find( 「循環滑動活性。 」)寬(); \t \t \t jQuery的()寬度(「 頂欄。」。 imgWidth); \t \t});'但它似乎沒有工作 – gteh 2013-05-06 11:50:30