题
我仍在学习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>
问题在于标题宽度仍然是容器的宽度。可以跨越整个容器宽度的图像可以,但如果它们狭窄的话也可以。
我一直在尝试调整 <p>
标签在DIV内,以使其宽度与图像相同,但仅设置一个宽度属性一次 <p>
在所有“信用”课程中 div
S,而不是循环循环。
解决方案
您应该给您的容器一组 min-width
在CSS中,也许设置 width:auto
. 。希望有帮助。
与您的CSS一起玩,听起来您可能可以使用CSS来使用CSS,而不是使用jQuery单独修复此操作。
不隶属于 StackOverflow