javascript - 按顺序点击时替换图像的代码？

标签 javascript php jquery html css

预先感谢任何看过我的问题的人:)

我对网页设计相当陌生，对于任何类型的编码来说都是新手。因此，任何帮助都将不胜感激!

我正在为网络漫画制作一个网站。页面设置如下:

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

在{页面导航}中，我对这些图标进行了编码:

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

我想对 {comic page} 图像进行编码以在点击时切换页面。但是，我还希望{页面导航}链接能够转到正确的页面。

我想知道是否有 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 {
	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 -->

最佳答案

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

{ current: '2', image: 'new-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 {
	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;
}
<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 -->

关于javascript - 按顺序点击时替换图像的代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40914255/

上一篇：javascript - 如何获取数组项并在html中制作相应的span

下一篇：javascript - Ember 模型结果在模板中为空，但在检查器中已填充

相关文章：

php - 通过命令行将 *(mp3、m4p 等)转换为 OGG 以兼容 HTML5

javascript - 使播放按钮一次显示在悬停 1 个图像上

javascript - knockout : show HTML - fill HTML

javascript - Redux thunk - 如何防止它发出不必要的 API 请求？

PHP JSON 或数组到 XML

javascript - 使用 jQuery 创建就地编辑 div 并在其下方创建可用于编辑的新 div

javascript - 我如何用 Jquery 或 javascript 重新编写这个 css ？

javascript - 如何在 Google Chrome 中关闭保留 JavaScript 控制台持久性

javascript - 从指令调用时未定义Typescript Angularjs Controller 范围

javascript - Graph API 将 base64 IMAGE 发布到 Facebook

©2024 IT工具网  联系我们