幻灯片高度变化刷新jQuery幻灯片

我的页面正在加载使用jquery循环插件制作的幻灯片。幻灯片有一个可变的高度，所以我不得不使用一些代码来评估每张幻灯片的高度，并相应地调整幻灯片包装的大小（因为铬是有问题）

所以这一切工作正常，当你加载页面 - 当你这样做是因为幻灯片的继承高度丢失 - 所以幻灯片下面的页面中的任何文本向上移动页面并在幻灯片后面 - 似乎只是第一张幻灯片的问题，因为它在此之后自行纠正。

这里是一个示例页面（请不要判断我的代码的其余部分 - 这只是一个开发网站，我知道是否需要清理!!） - 下面的文本（与soundcloud嵌入）图像是受滑动高度影响的位。 http://www.frootful.co.uk/index-z.php/?p=7

，这里是制作幻灯片工作的代码（那里的一些播放/暂停功能也在场）

<script type="text/javascript">  
$(document).ready(function() { 
    $('#toggle').bind("click", function() { 
    if ($(this).attr("class") == "play") 
    $(this).attr("class", "pause"); 
    else 
    $(this).attr("class", "play"); 
}); 
var toggle = $('#toggle').click(function() { 
    var paused = slideshow.is(':paused'); 
    slideshow.cycle(paused ? 'resume' : 'pause', true); 
}); 
var slideshow = $('#slideshow').cycle({ 
     fx:  "fade", 
     pager: "#single-slideshow-nav", 
     timeout: 4000, 
     prev: "#prev", 
     next: "#next", 
      after: onAfter, 
     pause: true 
    }); 
}); 
function onAfter() { 
    //get the height of the current slide 
    var $ht = $('.slidewrap').height(); 
    //set the container's height to that of the current slide 
    $("#slideshow").height($ht); 
} 
</script>

我的JavaScript也不是很大，所以，如果人们能解释的答案，这将是加倍的帮助！

感谢

编辑-----------

添加一个更好的例子页面（http://www.frootful.co.uk/index-z.php/？如上所述，下面的文本位是受滑动高度影响的位...

来源

2011-08-17 JorgeLuisBorges

我看不到您的幻灯片 – 2011-08-17 12:15:06

好点 - 更改为更好的示例页面 – JorgeLuisBorges 2011-08-17 13:36:37

（在回答时）。您的示例页面不包含任何幻灯片，也不包含任何幻灯片div叫toggle。

您的JavaScript包含两个$(document).ready块，它们都尝试为#toggle设置点击处理程序（即使该处理程序不存在）。您可能/应该将这些块合并到一个代码块中。

我猜paused和resumed功能是为了返回一个值，所以你需要添加一个return他们两个。（即return !byHover;，如果这就是你的意思）

还有什么？我想你可以尝试使用add/remove/toggleClass，而不是通过attr来操纵类，但我怀疑这会有所作为。

来源

2011-08-17 12:22:41 searlea

幻灯片高度变化刷新jQuery幻灯片

回答

相关问题