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，我已经尝试过每一行，我已经尝试过了#dc; gotdocument.getElementById＆＃39;，但没有任何作用！

幻灯片代码本身很好;如果我将它直接放在每个页面上，那么它可以正常工作，我似乎无法链接＆＃39;对于这段代码并让它运行，所以出现任何东西。

请为此提供最简单的解决方案，无需安装jquery插件，或使用除基本HTML和JS之外的任何其他内容。

Answer 1

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

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

并且您的主html页面应该有幻灯片div。

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

Answer 2

有很多小虫子，我为你修好了。你没有在你的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/

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

2 个答案: