javascript - 初始幻灯片显示拆分图像

Question

我正在使用我已经使用过很多次并且以前从未遇到过这个问题的caroufredsel。在 Safari 上，只有页面的初始加载显示分割图像 - 第一个的一半和第二个的一半。像这样：

幻灯片会很好地淡出下一个，如果您转到另一页并再次返回，那么它也很好。它只发生在 Safari 上。有没有人有任何想法？

这是我的html：

    <div class='slideshow'>
        <div class='centralised_div'>
            <div class='slideshow_inner'>
                <div class='slideshow_images'>
                    <img src='/images/ss2.jpg'/>
                    <img src='/images/ss3.jpg'/>
                    <img src='/images/ss4.jpg'/>
                </div>
            </div>
            <div class='arrow_left'><img src='/images/left_arrow.png'/></div>
            <div class='arrow_right'><img src='/images/right_arrow.png'/></div>
        </div>
    </div>

这是我的jQuery：

    <script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1-packed.js"></script>
    <script>
        $(document).ready(function() {
            $(".slideshow_images").carouFredSel({
                width: 940,
                height: 400,
                direction: "left",
                items: {
                    visible: 1,
                    start: "random",
                    width: 940,
                    height: 400
                },
                scroll: {
                    fx: "crossfade",
                    duration: 1000,
                    pauseOnHover: true
                },
                auto: 6000,
                prev: {
                    button: ".arrow_left",
                    key: "left"
                },
                next: {
                    button: ".arrow_right",
                    key: "right"
                }
            });
        });
    </script>

Answer 1

当我在加载窗口而不是准备好文档后对其进行初始化时，我在 carouFredSel 上遇到的大多数问题都得到了解决。也许这可以帮助你：

<script type="text/javascript" src="/js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script>
    $(window).load(function() {
        $(".slideshow_images").carouFredSel({
            width: 940,
            height: 400,
            direction: "left",
            items: {
                visible: 1,
                start: "random",
                width: 940,
                height: 400
            },
            scroll: {
                fx: "crossfade",
                duration: 1000,
                pauseOnHover: true
            },
            auto: 6000,
            prev: {
                button: ".arrow_left",
                key: "left"
            },
            next: {
                button: ".arrow_right",
                key: "right"
            }
        });
    });
</script>