基本的な "マンガリーダ"のようなイメージのカルーセル

Question

私は、.png形式のマンガのいくつかのページを約300個持っています。私はマンガを読むことができるように、私のウェブサイトにセクションを設定したいページは2つの矢印（「次のページ」と「前のページ」）を使用しています。私はページ間のアニメーションについては気にしない。私が達成したいと思うものの完璧な例はMangaFox（ウェブサイト全体ではなく、マンガを読むことができる窓）です。

基本設定は、左側にチャプターリスト、右側にチャプターページが表示された300pxの幅広いメニューです。マンガページimgのメニューまたは下のいずれかに、2つの矢印を使用して前または次のページに移動できます。

iframeの使用について考えました。各マンガページを含むHTMLページへのリンクがiframeをターゲットにして表示されます。しかし、これは私が各ページのHTMLページを終了し、前と次のページへのリンクを手動で設定する必要があります。私は300 htmlのページを持っていたので、これはあまりにも重く時間がかかるでしょう。 チャプターリストを.pngファイルに直接リンクしようとしましたが、画像は好きなようにスタイルされていません（少なくともChromeではページの中央に表示されず、左上隅に表示されます）、私は手動で前と次の矢印のリンクを設定する必要があります。

私の夢は： - ページの固定順序を設定する.pngファイルのリストがあります。 - 左メニューのドロップダウンリストは、リスト内の特定のページを直接指すことができます。 - 前後の矢印は表示されている画像を認識し、矢印をクリックするとリストの次の項目または前の項目にスキップします。現在のページの前にページがない場合は、「前の」矢印が消えます。そのアイテムがリストの最後のものである場合の「次の」矢印と同じです。

私は考えなかった簡単な方法があるかもしれませんが、見つけられません。

ありがとうございました！

（PS：私はワードプレス、単なるHTML、CSSとPHPを使用していない）

Answer 1

は、ここで私はこれを行うと考えることができ、最も簡単な方法です：

左

<a id="leftArrow" href="#{n-1}"></a> 

矢印右矢印

<a id="rightArrow" href="#{n+1}"></a> 

セットアップonhashchangelocation.hashあなたがどこかに定義されたページの配列を利用しimg要素のsrc属性に設定します。画像を更新し、

window.onhashchange = function(){ 
    var img = document.query('img'); 
    var left = document.query('#leftArrow'); 
    var right = document.query('#rightArrow'); 
    var pageNumber = parseInt(location.hash); 
    //put some error handling here for edge cases, then... 
    img.src = imagesArray[pageNumber]; 
    left.href = '#' + (pageNumber - 1); 
    right.href = '#' + (pageNumber + 1); 
}; 

あなたの側メニューのページへのリンクがhref="#{page number}"を持っているでしょうし、クリックされたときonhashchange機能をトリガーしますと矢印。

これが役に立ちます。