0

私は自分の Web サイトに新しい Web コミック ホームを構築していて、壁にぶち当たりました。

これが私が欲しいものと私が試したことです。

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 を介して到達可能であることがおそらく最善です。そうすれば、Web 上であなたのコミックを見つけた人は誰でも簡単に個々のコミックにリンクできます。

Tumblr、Blogger、Wordpress の使用を検討したことはありますか?

于 2014-06-21T05:38:50.863 に答える