0

我正在我的网站上建立我的新网络漫画主页，结果撞到了墙上。

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

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

我本来打算有一个 /First Next Prev Last/ 类型的导航，但我对此感到非常沮丧，以至于我暂时放弃了这个想法，而是考虑在下面列出每个漫画的名称 + 链接图像并将其放入滚动框中。有点像佩里圣经团契的运作方式。

我一直在试图弄清楚数组是否是可行的方法，因为到目前为止我有大约 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 以外的任何其他方法来做到这一点，我非常愿意接受它，除了前面提到的制作数百页的方法。

4

1 回答 1

0

首先，如果您打算使用 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 不会自动抓取您的所有图片。这也带来了一个可用性问题：你想强迫你的用户点击每一个漫画来到达第一个吗？如果每张图片都可以通过其自己的 URL 访问，那可能是最好的，这样，在网络上看到您的漫画的任何人都可以轻松链接到单个漫画。

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

于 2014-06-21T05:38:50.863 回答