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库，或dosnt使用<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>

在这里小提琴： http ： //jsfiddle.net/Nillervision/rvtrq/

Answer 2

你需要的是一点点javascript魔法。 你可以用vanilla js和jQuery来做到这一点。 我将为您的问题演示一个简单的jQuery解决方案。

由于您使用锚点来定位图像，因此浏览器将自动滚动到您选择的图像。 如果浏览器窗口很小并且图像移位，则会出现丑陋的跳跃效果。

Jquery代码：

$('#slider a').click(function(event){

    // prevent default behavior of anchors
    event.preventDefault();

    // get the id of selected image
    var $id = $(this).attr('href');

    // hide previous image (if there is one)
    $('#images .target').removeClass('target');

    // show the selected image
    $('#images ' + $id).addClass('target');
});

CSS更改：

#images img:target

变

#images img.target

我希望这会有所帮助，不要忘记将jQuery库包含在您的代码中。

祝好运！