0

我正在开发的网页上有一个缩略图滑块。现在，当我进入网站时，它只显示一小块图片，但是一旦我刷新页面，一切都很好，任何想法为什么会发生这种情况

http://www.ap2x.gbes.co.za/1/1.html 这是有问题的页面

我已经在 firefox、chrome 和 IE 上进行了测试。错误似乎不是特定于浏览器的

滑块在离线时工作得很好，没有这样的问题。我不知道是什么原因造成的

        $(function() {

            //  wrap all thumbs in a <div> for the 3x3 grid
            $div = null;
            $('#thumbs').children().each(function(i) {
                if ( i % 9 == 0) {
                    $div = $( '<div />' );
                    $div.appendTo( '#thumbs' );
                }
                $(this).appendTo( $div );
                $(this).addClass( 'itm'+i );
                $(this).click(function() {
                    $('#images').trigger( 'slideTo', [i, 0, true] );
                });
            });
            $('#thumbs img.itm0').addClass( 'selected' );

            //  the big-image carousel
            $('#images').carouFredSel({
                direction: 'up',
                circular: false,
                infinite: false,
                width: 500,
                height: 281,
                items: 1,
                auto: false,
                scroll: {
                    fx: 'directscroll',
                    onBefore: function() {
                        var pos = $(this).triggerHandler( 'currentPosition' );
                        $('#thumbs img').removeClass( 'selected' );
                        $('#thumbs img.itm'+pos).addClass( 'selected' );

                        var page = Math.floor( pos / 9 );
                        $('#thumbs').trigger( 'slideToPage', page );
                    }
                }
            });

            //  the thumbnail-carousel
            $('#thumbs').carouFredSel({
                direction: 'up',
                circular: false,
                infinite: false,
                width: 550,
                height: 150,
                items: 1,
                align: false,
                auto: false,
            });
        });
4

2 回答 2

0

我敢打赌你正在用 Chrome 浏览这个网站。当他无法确定元素的高度时，此浏览器存在一个令人讨厌的错误。一种解决方法是通过 css 手动为每个滑块图像设置宽度和高度。

于 2013-08-12T11:38:09.730 回答
0

听起来在加载图像之前它不起作用，因此您要么需要告诉滑块加载图像后图像有多大，要么等到它们被加载后再运行脚本。

添加以下 CSS 是否可以解决问题？

#images img {
    height: 281px;
    width: 500px;
}

我不能再得到这个错误来自己测试它。

于 2013-08-12T11:42:08.733 回答