javascript - CSS/HTML 画廊

Question

目前我有一个纯 HTML/CSS 图片库，但是由于它使用了 <a>标签来更改图像，它还会将页面向下移动到图像。我有一个固定的导航栏，不用说，它只是在页面向下移动时覆盖图像。

我目前正在为画廊使用的可爱 CSS

#images {
    width: 400px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 200px;
    position:absolute;
    opacity: 0;
    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    opacity: 1;
}

#slider a {
    text-decoration: none;
    margin-top:5px;
    border: 1px solid #4D3132;
    padding: 0px 6px;
    color: #FFF;
}
#slider a:hover {
    background: #282F40;
    color: #FFF;
}

和 HTML(当然不是整个页面，只是元素。)

<div id="images">
<img id="image1" src="http://i.imgur.com/dL3io.jpg" />
<img id="image2" src="http://i.imgur.com/qASVX.jpg" />
<img id="image3" src="http://i.imgur.com/fLuHO.jpg" />
<img id="image4" src="http://i.imgur.com/5Sd3Q.jpg" />
</div>  
<div class="center">
<div id="slider">
<a href="#image1">1</a>
<a href="#image2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>

</div></div>

那么，是否有可能创建一个 HTML/CSS 画廊，它不会影响页面，或者不使用 <a>标签...？

我还应该指出，我不想制作“幻灯片”，图像不必自动更改。

编辑:

图像本身没有移动，因为使用了 <a> 而被提升了。标签。

Answer 1

如果您不想使用 JavaScript，您可以通过为链接设置目标属性将图像加载到 iframe 中。

<div id="slider">
    <a target="pictureFrame" href="http://i.imgur.com/dL3io.jpg">1</a>
    <a target="pictureFrame" href="http://i.imgur.com/qASVX.jpg">2</a>
    <a target="pictureFrame" href="http://i.imgur.com/fLuHO.jpg">3</a>
    <a target="pictureFrame" href="http://i.imgur.com/5Sd3Q.jpg">4</a>
</div>
<iframe id="images" src="http://i.imgur.com/dL3io.jpg" name="pictureFrame">
</iframe>

在这里 fiddle :http://jsfiddle.net/Nillervision/rvtrq/