使用Javascript的Webcomic導航？

我在我的網站上構建了我的新webcomics主頁，並且跑到牆上。使用Javascript的Webcomic導航？

這就是我想要的和我所嘗試過的。

我想使用JavaScript的東西我只能做漫畫改變的圖像，所以我不必爲每個圖像做一個新的頁面。只要我的目錄中沒有數百頁，我不介意必須進行額外的編碼工作。

我將要有一個/第一個下一個上一個最後一個/導航的種類，但我一直很沮喪，我現在有點廢棄這個想法，而是想着有一個名單+鏈接每個漫畫下面的圖像，並把它放到一個滾動框中。有點像佩裏聖經團契的作品。

我一直在試圖找出一個數組是否可以走，因爲到目前爲止我已經有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以外的任何其他方法來完成此操作，除了前面提到的製作數百頁外，我對它更加開放。

來源

2013-07-07 user2557262

http://jsfiddle.net/M2BSu/我發現這個，但我需要幫助解決這個到我的情況。 – user2557262

我建議尋找一些像PHP這樣的服務器端語言。使用JavaScript使得您的網頁無法訪問未啓用JavaScript的用戶以及Google等一些自動抓取工具。 – icktoofay

首先，如果您打算使用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-21 05:38:50

使用Javascript的Webcomic導航？

回答

相關問題