如何使用 jquery 动态调整幻灯片标题？答案

【问题标题】：How do I use jquery to adjust slideshow captions on the fly?如何使用 jquery 动态调整幻灯片标题？
【发布时间】：2010-09-08 20:34:07
【问题描述】：

我还在学习 jquery 和 javascript，所以请多多包涵。我在 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> 标签，使其宽度与图像相同，但它只为所有“信用”类 @987654324 中的每个 <p> 设置一次宽度属性@s，而不是依次循环通过每个。

【问题讨论】：

标签： jquery html this attr

【解决方案1】：

您应该在 CSS 中为您的容器设置 min-width，并且可能设置 width:auto。希望对您有所帮助。

玩转你的 CSS，听起来你可以使用 CSS 来解决这个问题，而不是使用 jQuery 为每张幻灯片单独修复。

【讨论】：