2014-03-07 179 views
0

我正在學習基於本教程的水平圖像滾動
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> 
+0

創建的jsfiddle –

+0

什麼是'document.pic.src = imgArray [計數器]的.src;'? –

+0

@ Aashis Mishra在我的理解中應該包含下面列出的圖像 – Sham

回答

1

< IMG名= 「PIC」 >不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>