Javascript CSS/HTML图库

目前，我有一个纯HTML/CSS图像库，但由于它使用

那么，有没有可能创建一个不影响页面的HTML/CSS库，或者不使用

标记

我还应该指出，我不想做一个“幻灯片”，图像不必自动改变

编辑：

---

图像本身没有移动，因为使用了

标记，图像被放大了。

您需要的是一点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库包含到代码中

---

祝你好运

如果您不想使用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>

---

在这里拉小提琴：

Oh@Ruddy，你总是那么热心帮忙！；）@比阿特丽克斯总是这样！我回答了这个问题，不是吗法哈，在某一点上是真的……）@RoudBasic使用固定的位置也可以为你的图像，有点像LytBox类似：：[不是] OP意味着什么工作（滚动视图，然后点击图像框）通常我会认为IFRAMES是万恶之源；然而，在花了几个小时试图让其他东西工作之后，这似乎是仅使用HTML和CSS时的最佳选择。iFrame的最大问题是加载的内容不是主页DOM的一部分，因此您无法真正将CSS或JS应用于加载的内容。从SEO的角度来看，除了你的链接之外，没有迹象表明加载的内容与你的主页相关联。所以不要用它来加载重要的基于文本的内容。但是，只要图像作为加载的内容和指向它们的HREF，你就可以使用搜索引擎了。

#images img.target

<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>