Question

我想创建一个类似xkcd或smbc的下一个类型的网络漫画图片库，但我有一个粗略的开始。我一直在问wrong people并寻找错误的东西。显然，这甚至是asked here before，但我想从头开始制作它！

只使用纯JavaScript，HTML5和CSS3。我觉得这个项目将帮助我学习绳索。

以下是第一个想到我的想法。

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看到它！

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

我的问题如下：

如何让我的代码更有效率？
如何为慢速连接更好地加载图像？
制作我想制作的东西的任何好建议;资源，提示等等。

Answer 1

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

注意我是如何保持jquery简单的，并从左侧的img标签中提取src属性，然后将其用作我.big图像的背景？这样，我通过使用已存在的图像将请求保持在最低限度

$('.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

这是一种方法。我已经添加了它，而不是简单地让问题落到代码审核中，因为它无法正确启用/禁用按钮 - 您可能会在上面看到我的评论以获取更多信息。

<!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(', ')功能。

另外，我添加了一个“更改图片”。接收参数的函数，最终使用较少的代码。

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/

从头开始构建一个简单的图库

3 个答案: