Javascript 添加到现有的旧幻灯片放映脚本中,以包含图像的标题
我想知道是否有一个小的改变或增加,我可以对现有的脚本,添加标题的图像在我的幻灯片,或者如果我真的应该放弃这个旧的脚本,开始新的。所以有两个页面-介绍页面和幻灯片页面。简介页面有小的缩略图图像,点击后会将访问者带到幻灯片页面以查看缩略图的大版本,然后访问者可以点击所有大的缩略图代表图像或返回简介页面 以下是介绍页面(相关部分): 并在幻灯片页面底部添加一个代码段和函数(其他内容同上):Javascript 添加到现有的旧幻灯片放映脚本中,以包含图像的标题,javascript,html,arrays,slideshow,caption,Javascript,Html,Arrays,Slideshow,Caption,我想知道是否有一个小的改变或增加,我可以对现有的脚本,添加标题的图像在我的幻灯片,或者如果我真的应该放弃这个旧的脚本,开始新的。所以有两个页面-介绍页面和幻灯片页面。简介页面有小的缩略图图像,点击后会将访问者带到幻灯片页面以查看缩略图的大版本,然后访问者可以点击所有大的缩略图代表图像或返回简介页面 以下是介绍页面(相关部分): 并在幻灯片页面底部添加一个代码段和函数(其他内容同上): 您可以放置document.getElementById(“captionDiv”).innerHTML=cap
您可以放置document.getElementById(“captionDiv”).innerHTML=caption[imgnum]代码>在函数showImg(imgnum)
中,这样您就可以得到相关的图像标题。不幸的是,当我把这个放在函数showImg(imgnum)
中时,“未定义”出现在标题应该出现的地方。Safari的视图源显示加载资源失败:在此服务器上找不到请求的URL。还有一点可能很重要,那就是它将这个“未定义”视为资源类型:image,但这可能只是Safari控制台的问题。不过谢谢您的回答。我注意到另一件可能很重要的事情是行var imglength=newimg.length-1代码>。这不只是指newimg数组吗?我怎样才能使它引用两个数组?如果你没有定义,那么我怀疑幻灯片是如何工作的。尝试使用浏览器中可用的开发人员工具调试脚本。到目前为止,调试工具帮助不大。当document.getElementById(“captionDiv”).innerHTML=caption[imgnum]时,Undefined将消失代码>位于结束正文标记之前的最后一个脚本中,但显示的始终是“第一个图像的标题”,无论用户单击哪个缩略图进入幻灯片放映,或者在单击幻灯片时显示的是什么图像。这里是介绍页面的url,您可以在其中导航到幻灯片并返回,这可能有助于澄清-。谢谢好的,第一个缩略图链接由于某些原因不起作用,但是单击其他任何一个链接,它们会直接引导您。
<table>
<tr>
<td><a href="arbor-viewer-test-files.html?img=0">
<img src="images/thumbnails/arbor_0.jpg" width="100" />
</a></td>
<td><a href="arbor-viewer-test-files.html?img=1">
<img src="images/thumbnails/arbor_1.jpg" width="100" />
</a></td>
<td><a href="arbor-viewer-test-files.html?img=2">
<img src="images/thumbnails/arbor_2.jpg" width="100" />
</a></td>
<td><a href="arbor-viewer-test-files.html?img=3">
<img src="images/thumbnails/arbor_3.jpg" width="100" />
</a></td>
<td><a href="arbor-viewer-test-files.html?img=4">
<img src="images/thumbnails/arbor_4.jpg" alt="DFW Patio Cover Arbors" border="0" width="100" />
</a></td>
</tr>
</table>
<table border="0">
<tr>
<td align="center">
<p class="center largeP bold"> <a href="javascript:chgImg(-1)">Previous</a> | <a href="javascript:auto()">Auto/Stop</a> | <a href="javascript:chgImg(1)">Next</a> <br />
<a href="/arbors.htm">Return to the Arbor Gallery</a> </p>
<br />
</td>
</tr>
<tr>
<td align="center"> <br />
<img src="images/arbor_0.jpg" name="slideshow" />
<br />
</td>
</tr>
</table>
<script type="text/javascript">
showImg(queryString.img);
</script>
</body>
var newimg = new Array();
newimg[0] = "images/arbor_0.jpg";
newimg[1] = "images/arbor_1.jpg";
newimg[2] = "images/arbor_2.jpg";
newimg[3] = "images/arbor_3.jpg";
newimg[4] = "images/arbor_4.jpg";
function obj_queryString(){
qs = document.URL.substring(document.URL.indexOf('?')+1,document.URL.length);
queries = qs.split(/\&/);
for(i=0;i<queries.length;i++){
query = queries[i].split(/\=/);
this[query[0]] = unescape(query[1]);}
}
queryString = new obj_queryString();
var imgnum = 0;
var imglength = newimg.length - 1;
//delay betwn slides in millisecs
var delay = 3000;
var lock = false;
var run;
function showImg(imgnum){
document.slideshow.src = newimg[imgnum];
}
function chgImg(direction) {
if (document.images){
imgnum = imgnum + direction;
if (imgnum > imglength)
imgnum = 0;
if (imgnum < 0)
imgnum = imglength;
document.slideshow.src = newimg[imgnum];}
}
function auto(){
if (lock == true) {
lock = false;
window.clearInterval(run);}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);}
}
//under the newimg Array:
var caption = new Array();
caption[0] = "Caption for the first image";
caption[1] = "Caption for the second image";
caption[2] = "Caption for the third image";
caption[3] = "Caption for the fourth image";
caption[4] = "Caption for the fifth image";
<p id="captionDiv><br /></p>
<script type="text/javascript">
showImg(queryString.img);
document.getElementById("captionDiv").innerHTML=caption[imgnum];
</script>