按顺序替换图像的代码？

时间：2016-12-01 15:18:59

标签： javascript php jquery html css

提前感谢任何看过我问题的人:)

我更喜欢网页设计，而且对于任何类型的编码都是新手。所以任何帮助都会受到赞赏！

我正在建立一个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是否可行，但我不知道从哪里开始。我的webhost目前是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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
.top_nav {
	margin: 0 auto;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: black;
	text-align:center;
}

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

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

a {
	text-decoration: none;
	color: white;
	font-family: 'Cinzel', serif;
}
a:hover {
	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 -->

1 个答案:

答案 0 :(得分：0)

我建议使用类似API的服务器（express, for example），它会向您发送数据（采用JSON格式？），并且您可以使用JQuery进行解析。 然后，JQuery可以将数据放入适当的div中。 让我们假设您的服务器有/comic/:id路由。如果您点击<li><a href="/comic/2">></a></li>（因为您在第一页），它会发送给您：

  

{    当前：＆＃39; 2＆＃39;，    image：＆＃39; new-url.jpg＆＃39;   }

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

请记住，我只想到我认为容易做到和有效的事情：）

＆＃13;
＆＃13; 
$(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;
    });
  });
});
＆＃13; 
@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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
.top_nav {
	margin: 0 auto;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: black;
	text-align:center;
}

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

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

a {
	text-decoration: none;
	color: white;
	font-family: 'Cinzel', serif;
}
a:hover {
	color: gray;
}
＆＃13; 
<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 -->
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题