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

Adding HTML slideshow to multiple pages (without using frames)

本文关键字：框架 幻灯片 HTML 添加      更新时间：2023-09-26

我是新来的网站（和编码），所以请耐心等待！

我正在尝试将以下可点击的幻灯片添加到我的网站上，这意味着我可以在一个文件（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>

在相关的htmldiv中调用一个简单的.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之外的任何东西。

有很多小错误，我帮你解决了。你没有在javascript语句后面加分号，tey不是必要的，但它是更干净的代码，你没有退出很多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/

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

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

你的主html页面应该有一个幻灯片div.

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

相关文章：