我是网站的新手(和编码)所以请耐心等待我!
我正在尝试将以下可点击的幻灯片添加到我的网站,这意味着我可以在一个文件(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之外的任何其他内容。
答案 0 :(得分:0)
您可以创建一个搜索元素的javascript文件,并将元素的innerHTML更改为您要显示的幻灯片。
例如,这可能是脚本:
var slideshow = document.getElementById('slideshow');
slideshow.innerHTML = 'Your slideshow html';
并且您的主html页面应该有幻灯片div。
但是您需要知道它不是最佳解决方案,您应该学习PHP或其他后端语言,而不是使用include('page.html');
例如
答案 1 :(得分:0)
有很多小虫子,我为你修好了。你没有在你的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/