代碼點擊順序替換圖片？

我對網頁設計頗爲新穎，當涉及到任何類型的編碼時，完全是新手。所以任何幫助，將不勝感激！

我正在製作一個webcomic的網站。頁面設置是這樣的：

{top nav} 
{comic page} 
{Page navigation} 
{Update blog}

在{頁面導航}我有這些圖標編碼：

<< (first page) | < (previous page) | Page # | > (next page) | >> (newest page)

我想編寫代碼{漫畫頁}圖像切換上點擊頁面。不過，我還希望{Page navigation}鏈接轉到正確的頁面。

我想知道是否有一個Javascript代碼，甚至是另一種方法，將自動切換頁面，這樣我就不必爲每個漫畫頁面創建一個新的HTML頁面大約150）。我可以創建一個模板文件，然後使用JavaScript來替換圖像？

我也將有一個存檔頁面，它將按順序列出頁面。有沒有一種方法可以自動更新代碼？

我想知道如果使用PHP將工作，但我不知道從哪裏開始。我的網絡主機目前是GoDaddy，它確實給了我幾個數據庫，但我迷失於如何讓所有的點連接起來！

這裏是漫畫頁面和導航目前的代碼：

@charset "utf-8"; /* CSS Document */ 
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
 
\t display: block; 
 
} 
 
.top_nav { 
 
\t margin: 0 auto; 
 
\t width: 100%; 
 
\t padding-top: 5px; 
 
\t padding-bottom: 5px; 
 
\t background-color: black; 
 
\t text-align:center; 
 
} 
 

 
.page { 
 
\t margin: 0 auto; 
 
\t width:48%; 
 
\t max-width: 900px; 
 
\t min-width: 300px; 
 
\t margin-top: 3%; 
 
\t margin-bottom: 1.5%; 
 
\t height: 100%; 
 
\t box-shadow: 0 0 20px black; 
 
} 
 
.comic_nav { 
 
\t width: 100%; 
 
\t padding-top: 30px; 
 
\t padding-bottom: 30px; 
 
\t background-color: black; 
 
\t text-align:center; 
 
} 
 
body { 
 
\t background-color:#3A3A3A; 
 
\t color: #505050; 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-size: 17px; 
 
\t line-height: 1.5; 
 
} 
 
h2 { 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
\t padding: 5px 7px; 
 
\t font-size: 20px; 
 
\t text-decoration: none; \t 
 
\t display: inline-block; 
 
} 
 

 
/* ============================================================ 
 
    LISTS 
 
============================================================ */ 
 
nav ul { 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t text-align: center; 
 
} 
 
nav li { 
 
\t display: inline-block; 
 
} 
 
li a:link, a:visited { 
 
\t padding: 5px 7px; 
 
\t text-align: center; 
 
\t font-size: 20px; 
 
\t text-decoration: none; 
 
\t display: inline-block; 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
} 
 
li a:hover, a:active { 
 
\t background-color:#CCC; 
 
} 
 

 
a { 
 
\t text-decoration: none; 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
} 
 
a:hover { 
 
\t color: gray; 
 
}

<body> 
 
<div class="wrapper"> 
 
    <!-- TOP NAVIGATION --> 
 
    <div class="top_nav"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="miragecomic.html">Home</a> |</li> 
 
     <li> <a href="#">Archive</a> |</li> 
 
     <li> <a href="#">About</a> |</li> 
 
     <li> <a href="#">Cast</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    <!-- END TOP NAVIGATION --> 
 
    <!-- COMIC PAGE --> 
 
    <div class="page"> <a href="miragecomic.html"><img src="img/pages/1.jpg" style="width:100%; max-width: 900px; min-width: 400px; height:auto;" alt="Page 1" /></a> </div> 
 
    <!-- END COMIC PAGE--> 
 
    <!-- COMIC NAVIGATION --> 
 
    <div class="comic_nav"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#"><<</a> |</li> 
 
     <li> <a href="#"><</a> |</li> 
 
     <li> 
 
      <h2>Page#</h2> 
 
      |</li> 
 
     <li> <a href="#">></a></li> 
 
     | 
 
     <li> <a href="#">>></a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    <!-- END COMIC NAVIGATION -->

來源

2016-12-01 M. Nels

我會建議是一個API類服務器（express, for example），這將發送給您的數據（以JSON格式？），你可以用JQuery來解析。然後，JQuery可以將數據放入適當的div中。讓我們假設你的服務器有一個/comic/:id路由。如果你點擊<li><a href="/comic/2">></a></li>（因爲你是在第一頁上），它會送你：

{ 電流： '2'，形象： '新url.jpg' }

然後，使用jQuery：$('.page img').src = data.image和$('#previousImage').href = data.current - 1和$('#nextImage').href = data.current + 1等

請記住，這只是什麼，我覺得是很容易做到，高效的:)

想法

$(document).ready(function() { 
 
    $('#nextImage').click(function (event) { 
 
    $.get('https://my-server.com/api' + event.target.href, function (data) { 
 
     $('#previousImage').href = data.current - 1; 
 
     $('#nextImage').href = data.current + 1; 
 
     $('#currentImage').src = data.image; 
 
    }); 
 
    }); 
 
});

@charset "utf-8"; /* CSS Document */ 
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
 
\t display: block; 
 
} 
 
.top_nav { 
 
\t margin: 0 auto; 
 
\t width: 100%; 
 
\t padding-top: 5px; 
 
\t padding-bottom: 5px; 
 
\t background-color: black; 
 
\t text-align:center; 
 
} 
 

 
.page { 
 
\t margin: 0 auto; 
 
\t width:48%; 
 
\t max-width: 900px; 
 
\t min-width: 300px; 
 
\t margin-top: 3%; 
 
\t margin-bottom: 1.5%; 
 
\t height: 100%; 
 
\t box-shadow: 0 0 20px black; 
 
} 
 
.comic_nav { 
 
\t width: 100%; 
 
\t padding-top: 30px; 
 
\t padding-bottom: 30px; 
 
\t background-color: black; 
 
\t text-align:center; 
 
} 
 
body { 
 
\t background-color:#3A3A3A; 
 
\t color: #505050; 
 
\t font-family: 'Lato', sans-serif; 
 
\t font-size: 17px; 
 
\t line-height: 1.5; 
 
} 
 
h2 { 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
\t padding: 5px 7px; 
 
\t font-size: 20px; 
 
\t text-decoration: none; \t 
 
\t display: inline-block; 
 
} 
 

 
/* ============================================================ 
 
    LISTS 
 
============================================================ */ 
 
nav ul { 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t text-align: center; 
 
} 
 
nav li { 
 
\t display: inline-block; 
 
} 
 
li a:link, a:visited { 
 
\t padding: 5px 7px; 
 
\t text-align: center; 
 
\t font-size: 20px; 
 
\t text-decoration: none; 
 
\t display: inline-block; 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
} 
 
li a:hover, a:active { 
 
\t background-color:#CCC; 
 
} 
 

 
a { 
 
\t text-decoration: none; 
 
\t color: white; 
 
\t font-family: 'Cinzel', serif; 
 
} 
 
a:hover { 
 
\t color: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div class="wrapper"> 
 
    <!-- TOP NAVIGATION --> 
 
    <div class="top_nav"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="miragecomic.html">Home</a> |</li> 
 
     <li> <a href="#">Archive</a> |</li> 
 
     <li> <a href="#">About</a> |</li> 
 
     <li> <a href="#">Cast</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    <!-- END TOP NAVIGATION --> 
 
    <!-- COMIC PAGE --> 
 
    <div class="page"> <a href="miragecomic.html"><img id="currentImage" src="img/pages/1.jpg" style="width:100%; max-width: 900px; min-width: 400px; height:auto;" alt="Page 1" /></a> </div> 
 
    <!-- END COMIC PAGE--> 
 
    <!-- COMIC NAVIGATION --> 
 
    <div class="comic_nav"> 
 
    <nav> 
 
     <ul> 
 
     <li><a id="firstImage" href="/comic/first"><<</a> |</li> 
 
     <li> <a id="previousImage" href="/comic/13"><</a> |</li> 
 
     <li> 
 
      <h2>Page 14</h2> 
 
      |</li> 
 
     <li> <a id="nextImage" href="/comic/15">></a></li> 
 
     | 
 
     <li> <a id="lastImage" href="/comic/last">>></a></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
    <!-- END COMIC NAVIGATION -->

來源

2016-12-01 15:48:13 Fluf

哇，太感謝你了！這看起來很乾淨，就像它會適用於我！我從來沒有對API或服務器做過太深入的研究，所以我研究了Express和Node。我能夠以每月5美元的價格將節點添加到我的GoDaddy共享服務器中！你會碰巧有任何關於如何在GoDaddy服務器上設置Node和Express的教程鏈接嗎？很遺憾，我承認我是一個全新的人！ –

嗯，我不知道GoDaddy計劃中包含了什麼，但是如果您可以訪問命令行工具，只需安裝[node.js]（https://nodejs.org/en/），然後按照[quickstart （http://expressjs.com/en/starter/installing.html）:) 或者，如果您的計劃不允許您安裝第三方軟件，則可以使用PHP實現相同的結果API。在這種情況下，請看[Slim Framework]（http://www.slimframework.com/），它是一個非常輕量級的PHP框架，非常適合快速開發API。 – Fluf

這聽起來很像它會幫助我！ GoDaddy允許PHP元素。太棒了，非常感謝你的所有建議！：d –

代碼點擊順序替換圖片？

回答

相關問題