Question

上使用以下代码

<p>
<script type="text/javascript">
    // <![CDATA[
    jQuery(document).ready(function() {
        slider = jQuery('#slider-content');
        slider.before('<div id="stripNav0" class="stripNav">').cycle({
            fx: 'scrollLeft',
            timeout: 6000,
            speed: 1000,
            next: '.stripNavL',
            prev: '.stripNavR',
            pager: '#stripNav0'
        });
    });
    nextLink = jQuery('#stripNavLa');
    prevLink = jQuery('#stripNavRa');
    changeFx = function(fx) {
        opts = $(slider).data('cycle.opts');
        opts.currFx = fx;
        opts.fx = fx;
        slider.cycle.saveOriginalOpts(opts);
    }
    // ]]>
</script>
</p>
<div class="slider-wrap">
<div id="stripNavL0" class="stripNavL" onclick="changeFx('scrollRight')"><a id="stripNavLa" href="#">Left</a></div>
<div id="slider-content" class="slider-wrap"><a href="http://www.contactlensesaus.com/index.php/coloured-contact-lenses/blue-contact-lens.html"><img src="{{media url="home_banner.jpg"}}" alt="Blue Contact Lenses" /></a><a href="http://www.contactlensesaus.com/specials/special-1.html" target="_blank"><img src="{{media url="temp_home_banner.jpg"}}" alt="Contact Lenses Online" /></a><a href="http://www.contactlensesaus.com/index.php/coloured-contact-lenses/other-coloured-lens.html"> <img src="{{media url="home_banner_3.jpg"}}" alt="Coloured Contact Lenses" /></a></div>
<div id="stripNavR0" class="stripNavR" onclick="changeFx('scrollLeft')"><a id="stripNavRa" href="#">Right</a></div>
</div>
<!-- .slider-wrap -->

现在，这一切在某些系统上运行良好..但我一直在我的笔记本电脑上发现第一次加载的图像不会显示高度，最终会被隐藏。有谁知道解决这个问题的方法？

Answer 1

我发现jquery循环将图像位置css属性设置为绝对值，导致父容器没有明确的高度。

设置父容器的高度属性（推荐）
在jquery循环js文件中进行一些修改，找到所列图像中的最大高度并将其设置为父级。

Javascript幻灯片显示不显示图像的高度

1 个答案: