Question

我试图以列表格式显示图像并使用简单循环循环显示它们 - 但标题标题旋转正常但图像未显示在网站上。因此，如果您在社交媒体图标下的主页上查看左侧，则会有循环播放的广告。在检查元素和查看图像标签时，它显示有效图像，但图像大小显示为0x0，然后显示图像的自然大小。我似乎无法弄清楚这里发生了什么。我已经尝试过CSS调整但到目前为止没有运气。我错过了一些明显的东西吗？

网站：http://bit.ly/1tiPrZO

(function ($) {

$.fn.simpleCycle = function (options) {

    // Create some defaults, extending them with any options that were provided
    var settings = $.extend({
        interval: 6000
    }, options);

    return this.each(function () {
        if ($(this).is('ul')) {
            var $List = $(this);

            if ($List.children().size() > 1) {
                var $Children = $List.children();

                // set container dimensions
                function setContainerHeight() {
                    var height;
                    if (typeof settings.height == 'undefined') {
                        height = 0;
                        $Children.each(function () {
                            var thisHeight = $(this).outerHeight(true);
                            height = height < thisHeight ? thisHeight : height;
                        });
                    }
                    else
                        height = settings.height;

                    $List.css('height', height + 'px');
                }

                function setContainerWidth() {
                    var width;
                    if (typeof settings.width == 'undefinded') {
                        width = 0;
                        $Children.each(function () {
                            var thisWidth = $(this).outerWidth(true);
                            width = width < thisWidth ? thisWidth : width;
                        });
                    }
                    else
                        width = settings.width;

                    $List.css('width', width + "px");
                }

                function setContainerSize() {
                    setContainerHeight();
                    setContainerWidth();
                }

                setContainerSize();
                $List.load(setContainerSize);

                // add classes                  
                $List.addClass('simpleCycleList');
                $Children.addClass('simpleCycleItem');

                // setup
                var index = 0;
                $Children.css('z-index', '1').hide();
                $Children.first().show();

                function showSlide() {
                    var $child = $Children.eq(index);

                    $child.css('z-index', '2');

                    $Children.stop(true, true);

                    $child.fadeIn('slow', function () {
                        $Children.not($child).hide();
                        $Children.css('z-index', '1');
                    });
                }

                function next() {
                    index = (index + 1) % $Children.size();
                    showSlide();
                }

                // setup
                var seIntervalID = setInterval(next, settings.interval);

                // don't scroll on hover
                $List.hover(
                function () {
                    clearInterval(seIntervalID);
                },
                function () {
                    seIntervalID = setInterval(next, settings.interval);
                }
            );
            }
        }
    });
};

}）（jQuery的）;

脚本代码段

$('#LeftAdsBox ul#LeftAdsList').simpleCycle({ width: 215 });

 <div id="LeftAdsBox">
        <ul id="LeftAdsList" class="noBullets">

    <li class="leftAdBox">
        <h3><a href="/products/nails/kits/nailtiques-colour-and-care-kit.aspx?manufacturer=16">Nailtiques</a></h3>
        <div class="adContent">
            <div class="topTextBox">
                Colour &amp; Care Kit
            </div>
            <div class="bottomTextBox">
                <p>RRP £16</p>
<hr>
<p><strong>Our Price<br>
 £12.50</strong></p>
            </div>
            <div class="bottomImageBox">
                <a href="/products/nails/kits/nailtiques-colour-and-care-kit.aspx?manufacturer=16">
                    <img src="http://www.clitheroebeautycentre.co.uk/uploads/cms/carecoulour-gift-box-small-02102012-1243.jpg" alt="Nailtiques">
                </a>
            </div>
            <div class="clearMe"></div>
        </div>
    </li>

        </ul>
    </div>

Answer 1

啊，它似乎工作正常，只是重新发布网站，并在IIS中重新启动它瞧。嗯很奇怪。也许一些缓存影响了左边的广告。卫生署！

简单循环 - 图像问题

1 个答案: