Question

请帮助我运行我在这里找到的脚本：

<div class="container">
    <div id="slideshow">
        <img alt="slideshow" src="http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg" id="imgClickAndChange" onclick="changeImage()" />
    </div>
</div>
<script>
<div class="container">
    <div id="slideshow">
        <img alt="slideshow" src="http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg" id="imgClickAndChange" onclick="changeImage()" />
    </div>
</div>
<script>

    var imgs = ["http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg", "http://thumb9.shutterstock.com/photos/thumb_large/554278/132632972.jpg", "http://thumb7.shutterstock.com/photos/thumb_large/101304/133879079.jpg", "http://thumb101.shutterstock.com/photos/thumb_large/422038/422038,1327874090,3.jpg", "http://thumb1.shutterstock.com/photos/thumb_large/975647/149914934.jpg", "http://thumb9.shutterstock.com/photos/thumb_large/195826/148988282.jpg"];

function changeImage(dir) {
    var img = document.getElementById("imgClickAndChange");
    img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
}

document.onkeydown = function(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
        changeImage(-1) //left <- show Prev image
    } else if (e.keyCode == '39') {
        // right -> show next image
        changeImage()
    }
}

问题是我尝试在本地/离线运行它。那么如何像这样运行它

var imgs = ["pic1.gif", "pic2.gif", "pic3.gif", "pic4.gif", "pic5.gif"];

它让我疯狂：）

请多多谢谢

Answer 1

我相信您需要运行服务器并在本地托管图像。因此，您的链接看起来像localhost:1339/photos/thumb_large/253822/156271139.jpg。

编辑：抱歉，it is possible to embed images in html。

Answer 2

如果您可以依赖具有较长缓存生命周期的图像，并且首先在线进行自举，则您可以使用第一个解决方案，即引用第三方网址。但情况可能并非如此，除非您有一个非常可靠的第三方提供商，并且可以依赖最初的在线使用。

最有可能会涉及更多...

如果图像是静态的（或静态副本就足够了），那么要离线运行，您需要将图像保存为随应用程序一起提供的静态资源，或者如果它们足够小则将其保存为内联base64 encoded图像而且您不想提供其他文件。这种事情是获得100％离线应用程序的唯一方法，例如捆绑到一个严格脱机的移动应用程序。

如果图像本质上是动态的，那么它将更加复杂。在这种情况下，您需要将它们与您维护的某些服务器端逻辑同步。您可以将服务器设置为长时间缓存映像以满足脱机客户端，或使用浏览器存储来显式缓存它们。如果您可以依赖在线初始化期，这种方法仍然有效。

Answer 3

我把你的所有输入分类了。感谢。

我使用了base64，使用此网站转换http://picbase64.com/

然后用编码代码替换了URL ..

非常感谢

任何人都可以解释如何在Var中本地存储图像

3 个答案: