2010-09-08 37 views
1

我還在學習jquery和javascript,請耐心等待。我在jQuery中使用了一個教程來創建一個使用jquery循環函數的幻燈片。如何使用jquery隨時調整幻燈片標題?

這是偉大的,並允許我旋轉包含圖像和標題的各個div。

$(document).ready(function() { 
$('#gallery').cycle({ 
    fx: 'scrollRight', 
    timeout: 5000, 
    speed: 500, 
    delay: -2000, 
    pager: '#pager', 
    next: '#next', 
    prev: '#prev' 
}); 




$('#playControl').text('Play'); 

$('.credit imAgE (I had to change this because of rules for newbies').each(function(){ 
var widthSpacer = $(this).attr('width'); 
$('.credit p').css('width', widthSpacer + 10); 
}); 


$('#playControl').toggle(

     function() { 
      $('#gallery').cycle('resume'); 
      $(this).text('Pause'); 

     }, 
     function() { 
      $('#gallery').cycle('pause'); 
      $(this).text('Play'); 

     }); 

}); // end ready() 
</script> 

<div style="width: 640px;"> 


    <div id="contentWrap"> 
    <div id="main"> 

    <div id="controls"> 
    <span id="prev" class="control">Previous</span> 
    <span id="pager"></span> 
    <span id="next" class="control">Next</span> 
    <span id="playControl" class="control">Pause</span> 
    </div> 
    <div id="gallery"> 

<div class="credit"><image tag 1> 
    <p>Pic one caption</p> 
    </div> 

    <div class="credit"><image tag n"> 
    <p >Pic caption n</p> 
    </div> 

問題是標題寬度仍然是容器的寬度。跨越整個容器寬度的圖像沒問題,但如果它們很窄,則不會。

我一直在試圖調整在div內<p>標記,以便其寬度是一樣的圖像,但它僅適用於所有的「信用」類div S,而不是每次<p>設置width屬性一次依次循環。

回答

0

你應該給你的容器在CSS中設置一個min-width,也可以設置width:auto。希望有所幫助。

玩弄你的CSS,這聽起來像你可能能夠解決這一般使用CSS而不是單獨爲每個幻燈片使用jQuery。