图像导航叠加箭头（下一个和上一个）

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