Question

我正在学习基于本教程的水平图像滚动
http://www.homeandlearn.co.uk/JS/javascript_image_scroller.html

然而，下一张图像和上一张图像都没有显示在点击上，但是在点击6次后（第一张图像后面的5张图像），会弹出相应的警报。我是java脚本的新手。 PLz帮助我在哪里出错。（我确信在第一张图片出现时我已经为图像添加了正确的路径名，其他图像列在它们下面）

 <!DOCTYPE html>
    <html lang="en">
    <head>
          <script type="text/javascript">
    var p1=new Image();
    var p2=new Image();
    var p3=new Image();
    var p4=new Image();
    var p5=new Image();
    var p6=new Image();

    p1.src="page3.png";
    p2.src="2.gif";
    p3.src="3.gif";
    p4.src="4.gif";
    p5.src="5.gif";
    p6.src="6.gif";

    var imgArray=new Array(p1,p2,p3,p4,p5,p6);
    var counter=0;
    var end=5;

    function scroll_backward(){
        if (counter==0){
            alert("start of pictures");
        }
        else {
        counter--;
        }
        document.pic.src=imgArray[counter].src;
    }

    function scroll_forward () {
        if(counter==end){
            alert("No more pictures");
        }
        else{
            counter++;
        }
        document.pic.src=imgArray[counter].src;
    }
        </script>
    </head>
    <body>
    <TABLE width="500">
    <TR>
        <TD height="200" width="100">
        <IMG SRC="scrollforward.gif" onClick="scroll_forward()">
        </TD>

        <TD height="300">
        <IMG SRC="5.gif" name="pic1">
        </TD>

        <TD width="100">
        <IMG SRC="scrollbackward.png" onClick="scroll_backward()">
        </TD>
    </TR>
    </TABLE>
    </body>
    </html>

Answer 1

＆lt; IMG name =“pic”＆gt;不是pic1

这段代码绝对适合你:)

<!DOCTYPE html>
    <html lang="en">
    <head>
          <script type="text/javascript">
    var p1=new Image();
    var p2=new Image();
    var p3=new Image();
    var p4=new Image();
    var p5=new Image();
    var p6=new Image();

    p1.src="page3.png";
    p2.src="2.gif";
    p3.src="3.gif";
    p4.src="4.gif";
    p5.src="5.gif";
    p6.src="6.gif";

    var imgArray=new Array(p1,p2,p3,p4,p5,p6);
    var counter=0;
    var end=5;

    function scroll_backward(){
        if (counter==0){
            alert("start of pictures");
        }
        else {
        counter--;
        }
        document.pic.src=imgArray[counter].src; 
    }

    function scroll_forward () {
        if(counter==end){
            alert("No more pictures");
        }
        else{
            counter++;
        }
        document.pic.src=imgArray[counter].src;
    }
        </script>
    </head>
    <body>
    <TABLE width="500">
    <TR>
        <TD height="200" width="100">
        <IMG SRC="scrollforward.gif" onClick="scroll_forward()">
        </TD>

        <TD height="300">
        <IMG SRC="5.gif" name="pic1"> // **here is your problem >>> it was pic not pic1**
        </TD>

        <TD width="100">
        <IMG SRC="scrollbackward.png" onClick="scroll_backward()">
        </TD>
    </TR>
    </TABLE>
    </body>
    </html>

单击鼠标时图像不滚动

1 个答案: