Question

这对你们来说很有意思！

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

所以当你加载页面时一切正常 - 当你这样做时，幻灯片放映的继承高度会丢失 - 所以幻灯片放映下面的页面中的任何文字都会向上移动页面并在幻灯片放映后面 - 似乎只是一个但是第一张幻灯片的问题，因为它在那之后纠正了......

这是一个示例页面（请不要判断我的其余代码 - 这只是一个开发站点，我知道如果需要清理!!） - 下面的文本（使用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/?p=7），如上所述，下面的文本位是受幻灯片影响的位高度...

Answer 1

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

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

我猜测paused和resumed函数意味着返回一个值，因此您需要向它们添加return。（即return !byHover;，如果这就是你的意思）

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

用jquery幻灯片放映刷新幻灯片高度

1 个答案: