2014-01-27 73 views
0

我正在学习使用JavaScript和HTML创建幻灯片的教程。Java脚本幻灯片

第一张图片和“下一张”和“上一张”按钮在页面上,但是当我点击下一页或上一页时,表示无法找到该网页。有人能帮助我吗?

该教程可以找到here,我还包括下面的HTML和JavaScript代码。

的HTML代码是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/ 
      xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Image Slideshow</title> 
    <script type="text/javascript" 
     src="script09.js"></script> 
</head> 
<body bgcolor="#FFFFFF"> 
    <div align="center"> 
     <h1>Welcome, Robot Overlords!</h1> 
     <img src="images/robot1.jpg" 
      id="myPicture" width="200" 
      height="400" alt="Slideshow" /> 
     <h2><a href="previous.html" 
      id="prevLink">&lt;&lt; 
      Previous</a>&nbsp;&nbsp;<a 
      href="next.html" id="nextLink">Next 
      &gt;&gt;</a></h2> 
    </div> 
</body> 
</html> 

和JavaScript代码是

window.onload = initLinks; 

var myPix = new Array("images/robot1.jpg", 
    "images/robot2.jpg","images/robot3.jpg"); 
var thisPic = 0; 

function initLinks() { 
    document.getElementById("prevLink"). 
     onclick = processPrevious; 
    document.getElementById("nextLink"). 
     onclick = processNext; 
} 

function processPrevious() { 
    if (thisPic == 0) { 
     thisPic = myPix.length; 
    } 
    thisPic--; 
    document.getElementById("myPicture").src = 
     myPix[thisPic]; 
    return false; 
} 

function processNext() { 
    thisPic++; 
    if (thisPic == myPix.length) { 
     thisPic = 0; 
    } 

    document.getElementById("myPicture").src = 
     myPix[thisPic]; 
    return false; 
} 
+0

事件参数'e'添加到'processPrevious'和'processNext '函数如下:'function processPrevious(e){...}'和'function processNext(e){...}'。添加这个语句作为每个函数的第一个语句:'e.preventDefault();'... – War10ck

回答

0

而不是绑定在一个onload事件初始化函数的功能,尝试:

<a href="previous.html" id="prevLink" onclick="processPrevious();return false;"> 

机会是你在页面上有一个js错误,所以这些函数被忽略,并且a标签会跟随你所使用的链接。打开浏览器的控制台并检查语法错误。

0

您已经在这两个链接的href中给出了HTML页面url。

但我认为你只需要改变形象src属性...

使用href="javascript:"在两个环节。所以没有必要在这种情况下event.preventDefault() ...

href="#"滚动页面顶端).... :)