1

好吧，有点想不通了。在我为客户工作的网站上，我需要一些关于 JCarousel 的帮助。出于某种原因，我已经在上述问题上停留了几个小时。无论我尝试什么，我仍然遇到问题（尽管 Carousel 在加载后在页面上工作正常，请看图！）

我已经尝试过这个和这个以及其他建议，但没有运气，错误仍然出现。

我的代码如下所示：

<div class="Block BlockContent">

    <link rel="stylesheet" type="text/css" href="/content/PromoBannerCarousel/pbjcarousel.css">
    <script type="text/javascript" src="/content/PromoBannerCarousel/jquery.jcarousel.min.js"></script>

    <div class="jcarousel-skin-promobanner">
        <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
            <div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">
                <ul id="promobannercarousel" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; top: -500px; left: 0px; height: 90px; align: center;">
                    <li>
                        <a href="https://itoutlet.com.au/free-shipping-promotion-sep-2013/">
                           <img src="/content/PromoBannerCarousel/images/augfreedeliveryselprodmini.jpg" title="Free shipping on selected products throughout our store, available from Sep 11 to Sep 30 or while stocks last"/>
                        </a>
                    </li>

                    <li>
                        <a href="https://itoutlet.com.au/acer-promotions/">
                           <img src="/content/PromoBannerCarousel/images/acercashbackmini.jpg" title="Acer fantastic Laptop & All In One + Shipping cash back offers! Limited stocks, do not miss out!"/>
                        </a>
                    </li>
                    <li>
                        <a href="https://itoutlet.com.au/hp-promotions/">
                           <img src="/content/PromoBannerCarousel/images/hpaugoffersmini.jpg" title="HP fantastic Laptop + Shipping offers! Limited stocks, do not miss out!"/>
                        </a>
                    </li>
                    <li>
                        <a href="https://itoutlet.com.au/wd-promotions/">
                           <img src="/content/PromoBannerCarousel/images/wdpetrolpromotmini.jpg" title="WD Personal Cloud + Petrol Voucher + Shipping Promotion"/>
                        </a>
                    </li>  
                    <li>
                        <a href="https://itoutlet.com.au/lenovo-promotions/">
                           <img src="/content/PromoBannerCarousel/images/lenovoaugoffersmini.jpg" title="Great ThinkPad + Shipping offers from Lenovo. Limited stocks, do not miss out!"/>
                        </a>
                    </li>
                    <li>
                        <a href="https://itoutlet.com.au/samsung-tablets/">
                            <img src="/content/PromoBannerCarousel/images/galaxyfreeshipmini.jpg" title="Thin, light, stylish, Samsung Galaxy + Shipping offers. Limited stocks, do not miss out!"/>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="/content/PromoBannerCarousel/images/5shippingmini.jpg" title="$5 shipping anywhere in Australia on selected accessories. Look out for the $5 Shipping tag!"/>
                        </a>
                    </li>

                </ul>
            </div>
            <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div>
            <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div>
        </div>

    </div>    

</div>
<script type="text/javascript">   
jQuery(document).ready(function() {
    jQuery('#promobannercarousel').jcarousel({
        auto: 4,
        scroll: 1,
        wrap: 'circular',
        animation: 500,
        iniFallbackDimension: 90,
        itemLoadCallback: {
            onBeforeAnimation: mycarousel_fadeOut,
            onAfterAnimation: mycarousel_fadeIn
        }
    });
    function mycarousel_fadeOut(carousel) {
        var JCcontainerID = carousel.clip.context.id;
        $('#' + JCcontainerID).fadeOut();
    }

    function mycarousel_fadeIn(carousel) {
        var JCcontainerID = carousel.clip.context.id;
        $('#' + JCcontainerID).fadeIn();
    }
});
</script>

并且 CSS 可以在这里找到。

这是显示该问题的页面的链接。轮播是页面顶部的促销横幅。我使用 Chrome（最新版本）看到了这个问题。

任何帮助将不胜感激！

PS：我在 FireFox（最新版本）中看不到错误，所以不知道为什么它会在 Chrome 中出错，但不是 FF ......

PSS：当页面加载第一个图像时，您还会看到它在稳定之前闪烁了几次。我从来没有在 JCarousel 上遇到过这种情况，我也尝试了一些方法来解决这个问题......如果你对此有任何建议，我也会非常感激！

提前感谢您的帮助！米

4

0 回答 0