代码点击顺序替换图片？

我对网页设计颇为新颖，当涉及到任何类型的编码时，完全是新手。所以任何帮助，将不胜感激！

我正在制作一个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 –

代码点击顺序替换图片？

回答

相关问题