自动化HTML幻灯片

时间:2014-03-11 23:16:14

标签: javascript html

我有一个javascript在我的网页上运行图像幻灯片,我调整了脚本..........脚本工作正常,但我必须手动启动它。如果有人能给我一行代码以便脚本可以在加载brouser后自动启动,我将不胜感激。我在下面给出了整个代码,包括包含它的hte html。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">
var num=1
img1 = new Image ()
img1.src = "img1.jpg"
img2 = new Image ()
img2.src = "img2.jpg"
img3 = new Image ()
img3.src = "img3.jpg"
img4 = new Image ()
img4.src = "img4.jpg"

text1 = "Text for Picture One"
text2 = "Text for Picture two"
text3 = "Text for Picture Three"
text4 = "Text for Picture Four"

function slideshowUp()
{
 num=num+1
 if (num==5)
  {num=1}
  document.mypic.src=eval("img"+num+".src")
  document.myform.mytext.value=eval("text"+num)
}
function slideshowBack()
{
  num=num-1
  if (num==0)
  {num=4}
  document.mypic.src=eval("img"+num+".src")
  document.myform.mytext.value=eval("text"+num)
}
</SCRIPT>  
</HEAD>

<BODY>
<IMG SRC="img1.jpg" NAME="mypic" BORDER=0 WIDTH="400">
<p>
<FORM NAME="myform">
<INPUT TYPE="text" width="100" NAME="mytext" VALUE="Text For Picture One">
</FORM>
<A HREF="JavaScript:slideshowBack()"> Previous Image</A>&nbsp&nbsp&nbsp&nbsp
<A HREF="JavaScript:slideshowUp()"> Next Image</A>

<NOSCRIPT>
<!--
for search engines and non-javascript browsers
-->
</NOSCRIPT>

</BODY>
</HTML>

将不胜感激。

1 个答案:

答案 0 :(得分:0)

用以下内容包装整个脚本:

$(function() {
    // your scripts go here

    slideshowUp();   // add these two lines
    slideshowBack();
});