Question

我正在我的网站上建立我的新webcomics home并且已经碰到了墙。

这就是我想要的和我尝试过的。

我正在尝试使用JavaScript的东西我只能制作漫画改变的图像，这样我就不必为每个图像创建一个新页面。只要我的目录中没有数百页，我就不介意做额外的编码工作。

我将会有一个/第一个下一个上一个上一个/导航类型，但我一直很沮丧，我现在已经废弃了这个想法，而是考虑有一个列表的名称+链接图像下方的每个漫画，只需将其放入滚动框。有点像Perry Bible Fellowship的工作原理。

我一直想弄清楚是否有阵列是可行的，因为到目前为止我有大约30张图像，我将每天更新。老实说，我甚至都不知道Javascript是否也是如此。

我也尝试实施[此代码]（http://interestingwebs.blogspot.com/2012/09/change-image-onclick-with-javascript.html
）看看它是否会起作用，一旦我尝试将自己的东西插入其中，它似乎就会破裂。这是我的javascript屠夫工作的一个例子：

<script language="javascript">
function Drpepper() 
{
    document.getElementById("image").src = "/comics/1DrPepper.jpg";  
}

function Applestore() 
{
    document.getElementById("image").src = "/comics/2Applestore.jpg"; 
}
</script>

<p>
<img alt="Dr Pepper" src="1DrPepper.jpg" 
        style="height: 85px; width: 198px" id="image" /></p>
<p>
<input id="Button1" type="button" value="Dr Pepper" onclick="DrPepper()"/>   
<input id="Button2" type="button" value="Apple Store" onclick="Applestore()" /></p>

有没有为我的目的扩展这个？我想要的是没有按钮，只是使用链接，但我似乎无法超越这一部分，在这里图像甚至没有加载，按钮什么都不做。

此外，如果有更好的方法可以使用除JavaScript以外的任何其他方法来执行此操作，我不仅仅对它开放，除了前面提到的数百页。

Answer 1

首先，如果您打算使用Javascript路线，请考虑使用jQuery。这是我为你嘲笑的一个例子：

// set up an array of comic images
var imgs = [
        'http://dustinland.com/dlands/dland.sxsw.jpg',
        'http://dustinland.com/dlands/dland.hipster.jpg',
        'http://dustinland.com/dlands/dland.legalize.marijuana.jpg',
        'http://dustinland.com/dlands/dland.TLDR.jpg'
    ],
    // initialize current to 0
    current = 0;

// define a function that returns the next item in the imgs array, 
// or the first if we're already at the last one
function next() {
    current++;
    if (current >= imgs.length) current = 0;
    return imgs[current];
}

// define a function to do the opposite of next()
function prev() {
    current--;
    if (current < 0) current = imgs.length - 1;
    return imgs[current];
}

// define the first image in terms of a jquery object
var comic = $('<img/>').attr('src', imgs[0]);

// append to DOM
$('#comics').append(comic);

// click the prev button, get the previous image
$('#prev').on('click', function(){
    comic.attr('src', prev());
});

// click the next button, get the next image
$('#next').on('click', function(){
    comic.attr('src', next());
});

在此处查看此操作：http://jsfiddle.net/QzWV5/

这可能适用于您的应用程序，但也许您应该考虑@icktoofay的建议;使用Javascript至少意味着Google不会自动抓取您的所有图片。这也提出了一个可用性问题：您是否希望强制您的用户点击每个漫画以达到第一个？最好是每张图片都可以通过自己的网址访问，这样，任何在网络上看到漫画的人都可以轻松链接到单个漫画。

您是否考虑过使用Tumblr，Blogger或Wordpress？

使用Javascript进行Webcomic导航？

1 个答案: