将 HTML 幻灯片添加到多个页面（不使用框架）

Question

我是该网站（和编码）的新手，所以请多多包涵！

我正在尝试将以下可点击幻灯片添加到我的网站，这意味着我可以更改一个文件（HTML 或 JS）中的图像，这会反映在调用幻灯片的每个页面上：

<table border="0" cellpadding="0">
<td width="100%">
    <img src="image1.bmp" width="200" height="200" name="photoslider"></td>
</tr>
<tr>
    <td width="100%">
        <form method="POST" name="rotater">
            <div align="center">
                <center><p>
<script language="JavaScript1.1">
var photos=new Array()
var text=new Array()
var which=0
var what=0
photos[0]="image1.bmp"
photos[1]="image2.bmp"
photos[2]="image3.bmp"
text[0]="Image One"
text[1]="Image Two"
text[2]="Image Three"
window.onload=new Function("document.rotater.description.value=text[0]")
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
function type()
{
alert("This textbox will only display default comments")
}
</script>
<p><input type="text" name="description" style="width:200px" size="50">

<p><input type="button" value="<<Back" name="B2"
  onClick="backward()"> <input type="button" value="Next>>" name="B1"
  onClick="forward()"><br />
  </p>
  </center>
            </div>
        </form>
    </td>
</tr>

目前我用过：

<script type="text/javascript" src="images.js"></script>

在相关的 html div 中。调用一个简单的 .js 文件，该文件在一个长列表中显示图像，例如

document.write('<p>Image One</p>')
document.write('<a href="image1.png"><img src="image1small.png" alt=Image One; style=border-radius:25px></a>')
document.write('<p>Image Two</p>')
document.write('<a href="image2.png"><img src="image2small.png" alt=Image Two; style=border-radius:25px></a>')

我已经尝试了所有我能想到的方法，并在这里搜索了许多帖子以尝试让幻灯片显示在同一个 div 中。我已将 html 代码复制到 .js 文件中，并在每一行附加了 document.write，我在每一行都尝试了 /，我尝试了“gettingdocument.getElementById”，但没有任何效果！

幻灯片代码本身没问题；如果我将它直接放在每个页面上，那么它可以正常工作，我似乎无法“链接”到此代码并让它运行，所以会出现任何内容。

请为此提供最简单的解决方案，无需安装 jquery 插件，或使用基本 HTML 和 JS 以外的任何东西。

Answer 1

有很多小错误，我为您修复了它们。你没有在你的 javascript 语句后加分号，这不是必需的，但它是更简洁的代码，你没有退出很多 html 标记

<table border="0" cellpadding="0">
<tr>
    <td width="100%">
        <img src="image1.bmp" width="200" height="200" name="photoslider">
    </td>
</tr>
<tr>
    <td width="100%">
        <form method="POST" name="rotater">
            <div align="center">
                <center>
                   <p>
                       <p id="description" style="width:200px" size="50"></p>
                       <p><a onClick="backward()"><img src="imageback.png" alt="back" />Back Image</a>
                       <p><a onClick="forward()"><img src="forward.png" alt="forward" />Forward Image</a>
                   </p>
                 </center>
            </div>
        </form>
    </td>
</tr>

Javascript：

 (function() {
    var photos=[];
    var text= [];
    var which=0;
    var what=0;

    photos[0]="image1.bmp";
    photos[1]="image2.bmp";
    photos[2]="image3.bmp";
    text[0]="Image One";
    text[1]="Image Two";
    text[2]="Image Three";

    document.getElementById('description').innerHTML  = text[0] 

    backward = function(){
        if (which>0){
            which--;
            window.status='';
            what--;
            console.log(which);
            document.images.photoslider.src=photos[which];
            document.getElementById('description').innerHTML = text[what];
        }
    }
    forward = function(){
        if (which < (photos.length-1)){
            which++;
            console.log(which);
            document.images.photoslider.src=photos[which];
            what++;
            document.getElementById('description').innerHTML = text[what];
        }
        else {
            document.getElementById('description').innerHTML = 'End of gallery';
        }
    }
    function type()
    {
        alert("This textbox will only display default comments")
    }

})();

最后但并非最不重要的是，我创建了小提琴来向您展示它的工作原理： http://jsfiddle.net/45nobcmm/24/

Answer 2

您可以创建一个 javascript 文件来搜索元素并将元素的 innerHTML 更改为您要显示的幻灯片。
例如，这可能是脚本：

var slideshow = document.getElementById('slideshow');
slideshow.innerHTML = 'Your slideshow html';

您的主 html 页面应该有一个幻灯片 div。

但您需要知道这不是最好的解决方案，您应该学习 PHP 或其他后端语言，而不是使用 include('page.html'); 例如