【发布时间】：2015-03-02 16:47:25
【问题描述】：
我想制作一个类似xkcd 或smbc 的next-prev 类型的网络漫画图片库
以下是我脑海中浮现的第一个想法。
HTML：
<h1>Oscars 2015</h1>
<button id="prev" onclick="prev(); return false;" disabled>PREVIOUS</button>
<button id="next" onclick="next(); return false;">NEXT</button>
<h3>(<span id="num">#</span>) <span id='title'>title</span></h3>
<img id="comic"/>
JavaScript：
var img = [
["http://i.imgur.com/B1YclC5.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Picture."],
["http://i.imgur.com/XjAdinX.jpg", "Eddie Redmayne won Best Actor in a Leading Role for his role in The Theory of Everything."],
["http://i.imgur.com/kCj3uvC.jpg", "Julianne Moore won Best Actress in a Leading Role for her role in Still Alice."],
["http://i.imgur.com/OJq9hq1.jpg", "J K Simmons won Best Actor in a Supporting Role for his role in Whiplash."],
["http://i.imgur.com/qZ4XnIJ.jpg", "Patricia Arguette won Best Actress in a Supporting Role for her role in Boyhood."],
["http://i.imgur.com/QTGeTJ6.jpg?1","Big Hero 6 won Best Animated Feature Film."]
];
var i = 0;
function setComic() {
console.log(img[i]);
document.getElementById("comic").src = img[i][0];
document.getElementById("num").textContent = i+1;
document.getElementById("title").textContent = img[i][1];
}
setComic();
function prev() {
i--;
if (i <= 0) document.getElementById("prev").setAttribute('disabled', true);
else document.getElementById("next").disabled = false;
setComic();
console.log(i);
}
function next() {
i++;
if (i >= img.length - 1) document.getElementById("next").disabled = true;
else document.getElementById("prev").disabled = false;
setComic();
console.log(i);
}
在行动中看到它here！
我想把按钮放在图片的上方和下方。所以，我做了，我用类替换了下一个/上一个 id，并使用了 document.getElementsByClass() 东西，但它没有像我想象的那样工作。 (code here)。而这只是冰山一角。
我的问题如下：
-
如何让我的代码更有效率？
-
对于慢速连接，如何更好地加载图像？
-
任何关于制作我想做的东西的好建议；资源、提示等。
【问题讨论】：
-
我不知道你想问什么。请澄清您的问题，使其成为一个简单的问题陈述，并仅包含相关代码以重现您要解决的问题。
-
getElementsByClass()给出一个元素数组，而不是单个元素。 -
@Nik，我很欣赏你的热情，但请尽量保持每个问题一个问题。你问的问题太宽泛了，无法回答。我认为此时您应该查看the StackOverflow help center article on how to ask a good question。如果您真的只是在进行代码审查，请在 Code Review 上发帖。
-
只要且仅当代码按您的预期工作时，它就会成为 Code Review 的好帖子，以了解如何改进它。确保在问题中包含所有要审核的代码。
-
@nik - 是的，差不多。不过，您可以使用辅助函数来简化它。我将添加我可能接近它的方式 - 虽然只会使用幼稚的逻辑来启用/禁用按钮（您需要处理两种类型的按钮以响应对任一类型的点击 - 否则 prev 按钮将保持禁用状态，如果你到达终点，下一个按钮将被锁定在禁用状态）
标签： javascript html image storage