如何制作图像卷

Question

我想做一个类似xkcd or smbc

的下一页类型的网络漫画图库

以下是第一个跳入我脑海的想法。

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！

我想把按钮放在图片的上方和下方。所以，我做了，我用类替换了 next/prev id 并使用了 document.getElementsByClass() 东西，但它没有像我想象的那样工作。 (code here)。而这只是冰山一角。

我的问题如下：

我怎样才能使我的代码更高效和有效？
我怎样才能更好地加载慢速连接的图像？
对于制作我想制作的东西有什么好的建议；资源、技巧等

Answer 1

您可以为此使用 css，并将您的 html/jquery 保持在最低限度。

请注意我是如何保持 jquery 简单，并从左侧下方的 img 标签中提取 src 属性，然后将其用作 [=14] 的背景=] 图片？这样一来，我通过使用已有的图像将请求保持在最低限度

$('.sidepanel img').click(function() {
  var val = $(this).attr("src");
  $('.gallery .big').css("background", "url(" + val + ")").css("background-size", "100% 100%");
});

.sidepanel {
  width: 100px;
  height: 400px;
  display: inline-block;
}
.sidepanel img {
  height: 100px;
  width: 100px;
}
.gallery .big {
  height: 400px;
  width: 400px;
  background: lightgray;
  background-size: 100% 100%;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="sidepanel">
    <img src="http://placekitten.com/g/300/300" />
    <img src="http://placekitten.com/g/200/300" />
    <img src="http://placekitten.com/g/300/200" />
    <img src="http://placekitten.com/g/300/150" />
  </div>
  <div class="big"></div>
</div>

Answer 2

这是一种方法。我已经添加了它，而不是简单地让问题通过代码审查，因为它未能正确 enable/disable 按钮 - 您可以在上面看到我的评论以获取更多信息。

<!doctype html>
<html>
<head>
<script>
"use strict";
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."],
    ["http://i.imgur.com/sYXnpMC.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Cinematography."],
    ["http://i.imgur.com/I0necik.jpg", "The Grand Budapest Hotel won Best Costume Design."],
    ["http://i.imgur.com/WKoIcqp.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Directing."],
    ["http://i.imgur.com/FAOxXO4.jpg", "CitizenFour won Best Documentary Feature."],
    ["http://i.imgur.com/7jWMv2d.jpg", "Crisis Hotline: Veterans Press 1 won Best Documentary Short Subject."],
    ["http://i.imgur.com/WMxECgv.jpg", "Whiplash won Best Film Editing"],
    ["http://i.imgur.com/igS4Vmh.jpg", "Ida won Best Foreign Language Film."],
    ["http://i.imgur.com/6PxTKRo.jpg", "The Grand Budapest Hotel won Best Makeup and Hairstyling."],
    ["http://i.imgur.com/H83ss3z.jpg", "The Grand Budapest Hotel won Best Original Score."],
    ["http://i.imgur.com/pD5LG2o.jpg", "Glory from the film Selma won Best Original Song."],
    ["http://i.imgur.com/7vJYuKI.jpg", "The Grand Budapest Hotel won Best Production Design."],
    ["http://i.imgur.com/Xpe3tVC.jpg", "Feast won Best Animated Short Film."],
    ["http://i.imgur.com/OIe1PGe.png", "American Sniper won Best Sound Editing."],
    ["http://i.imgur.com/PvqfxQe.jpg", "Whiplash won Best Sound Mixing."],
    ["http://i.imgur.com/2Z4jjz7.jpg", "Interstellar won Best Visual Effects."],
    ["http://i.imgur.com/AOciJZ2.jpg", "The Imitation Game won Best Adapted Screenplay."],
    ["http://i.imgur.com/jAWd8MK.jpg", "Birdman or (The Unexpected Virtue of Ignorance) won Best Original Screenplay."],
    ["http://i.imgur.com/sJM5sw2.jpg", "Cat tax."]
];

window.addEventListener('load', onDocLoaded, false);

function byId(elemId){return document.getElementById(elemId);}
function allByClass(className){return document.getElementsByClassName(className);}
function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); }

function onDocLoaded(evt)
{
    var prevBtns = allByClass('prevBtn');
    var nextBtns = allByClass('nextBtn');
    forEachNode(prevBtns, function(elem, index, list) { elem.addEventListener('click', onPrevBtnClick, false); } );
    forEachNode(nextBtns, function(elem, index, list) { elem.addEventListener('click', onNextBtnClick, false); } );
    setComic();
}


var curImgIndex = 0;

function setComic()
{
    console.log(img[curImgIndex]);
    document.getElementById("comic").src = img[curImgIndex][0];
    document.getElementById("num").textContent = curImgIndex + 1;
    document.getElementById("title").textContent = img[curImgIndex][1];
}

function enableButtons(className, isEnabled)
{
    var btnList = allByClass(className);
    forEachNode(btnList, nodeFunc);

    function nodeFunc(elem, index, list)
    {
        elem.disabled = !isEnabled;
    }
}

function onPrevBtnClick()
{
    --curImgIndex;
    if (curImgIndex < 1)
        enableButtons('prevBtn', false);
    else 
        enableButtons('prevBtn', true);

    enableButtons('nextBtn', true);
    setComic();
    console.log(curImgIndex);
}

function onNextBtnClick() 
{
    ++curImgIndex;
    if (curImgIndex > img.length - 2)
        enableButtons('nextBtn', false);
    else 
        enableButtons('nextBtn', true);

    enableButtons('prevBtn', true);
    setComic();
    console.log(curImgIndex);
}
</script>
<style>
img {
    height:250px;
}
</style>
</head>
<body>
    <h1>Oscars 2015</h1>

    <!--Top Controls-->
    <button class="prevBtn" disabled>PREVIOUS</button>
    <button class="nextBtn">NEXT</button>

    <h3>(<span id="num">#</span>) <span id='title'>title</span></h3>

    <img id="comic" />
    <br/>
    <br/>
    <!--Bottom Controls-->
    <button class="prevBtn" disabled>PREVIOUS</button>
    <button class="nextBtn">NEXT</button>
</body>
</html>

Answer 3

没有理由每个图像都有自己的数组，例如，您可以使用 split(', ') 功能。

此外，我添加了一个 'change image' 函数来接收参数，因此您最终可以使用更少的代码。

var images = [
    'http://i.imgur.com/B1YclC5.jpg, description0, alt0',
    'http://i.imgur.com/XjAdinX.jpg, description1, alt1',
    'http://i.imgur.com/kCj3uvC.jpg, description2, alt2',
    'http://i.imgur.com/OJq9hq1.jpg, description3, alt3'],
    max = parseInt(images.length - 1),
    curr = 0;

function display(a, b, c) {
    img = document.getElementById('myImage');
    img.src = a;
    img.setAttribute('alt', b);
    document.getElementById('desc').innerHTML = c;
}

function next() {
    if (curr < max) {
        curr += 1;
        arr = images[curr].split(', ');
        path = arr[0];
        desc = arr[2];
        alt = arr[1];
        display(path, desc, alt);
    }
}

function prev() {
    if (curr > 0) {
        curr -= 1;
        arr = images[curr].split(', ');
        path = arr[0];
        desc = arr[2];
        alt = arr[1];
        display(path, desc, alt);
    }
}

http://jsfiddle.net/scott88/p4utrd7v/

如何制作图像卷

How to make an image roll

html

javascript

storage

image