Question

我正在尝试为我的图库中的图像创建叠加图像导航箭头，我发现了一些脚本并且工作正常，但它要求我提供图像尺寸才能正常工作，HTML代码

<div id="article_image">

    <img alt="" src="image.jpg" />

    <div id="article_image_overlay" style="height: 361px; width: 620px">

        <a href="prev" class="prev" title="Previous image"><span style="height: 361px; display: inline"/></a>
        <a href="next" class="next" title="Next image"><span style="height: 361px; display: inline"/></a>
    </div>

</div>

和CSS样式

#article_image {clear:both;margin:7px 0 10px;position:relative;overflow:hidden;overflow:hidden;}
#article_image img {display:block;}

#article_image_overlay {position:absolute;z-index:2;top:0;left:0;}
#article_image_overlay a {position:absolute;left:0;top:0;width:50%;height:100%;background:url('blank.gif') repeat 0 0;}

#article_image_overlay .next {left:auto;right:0;}

#article_image_overlay span {float:left;width:75px;height:100%;display:none;zoom:1;background:url('blank.gif') repeat 0 0;margin:0 0 0 12px;cursor:pointer;}
#article_image_overlay .next span {margin:0 12px 0 0;float:right;}

#article_image_overlay .prev:hover span,#article_image_overlay .prev.hover span {background:url('arrow_left.png') no-repeat 0 50%;}
#article_image_overlay .next:hover span,#article_image_overlay .next.hover span {background:url('arrow_right.png') no-repeat 100% 50%;}

一切正常，但我无法访问图片维度（直接），我想从HTML代码中删除它，所以它适用于纯CSS / JS解决方案，我需要一些帮助，谢谢：）

Answer 1

之前我遇到过此问题，您需要在运行代码之前“加载”图像，如下所示：

$('.myDiv img').load(function() {
   // run slider here...
});

您会注意到图像需要完全加载才能运行滑块，这可能看起来不太好，因此，您可能希望在加载时隐藏“.myDiv”，并在图像到位后显示（请参阅jquery toogle了解相关信息。

我希望它有所帮助！

MB

图像导航覆盖箭头（下一个和上一个）

1 个答案: