JAVASCRIPT 圖片切換練習,整完了啥內容沒有,為啥啊

CSDN問答 2022-01-07 23:29:14 阅读数:614

javascript 完了

<!DOCTYPE html>

<titile>picture</titile>

<head>

 <meta charset="UTF-8">

 <style type="text/css">

 *{

     margin: 0;

     padding: 0;    

 

 }

  #outer{

   width: 500px;

   margin: 50px auto;

   padding: 10px;

   background-color: burlywood;

   text-align: center;

  }

 </style>

 <script type="text/javascript">

 window.onload=fuction()

 {

//獲取兩個按鈕

  var prev=document.getElementById("prev");

  var next=document.getElementById("next");

  //保存圖片路徑

  var imgArr=["tupian/1.jpg","tupian/2.jpg","tupian/3.jpg","tupian/4.jpg","tupian/5.jpg"];

//兩個按鈕的響應函數

  prev.onclick=function(){

        index--;

        if(index<0){

            index=imgArr.length-1;

        }

    

        

        img.src=imgArr[index];

        info.innerHTML="一共"+imgArr.length+"張,當前第"+(index+1)+"張圖片";

    }

    next.onclick=function(){

        index++;

        if(index>imgArr.length-1){

            index=0;

        }

    

        

        img.src=imgArr[index];

        info.innerHTML="一共"+imgArr.length+"張,當前第"+(index+1)+"張圖片";

    }

 

 }

    

    var index=0;

    var img=document.getElementsByTagName("img");

    var info=document.getElementById(info);

    

    

    

    

    

    

    </script>

</head>

<body>

 

<div id="outer">

    <p id="info"></p>

    <button id="prev">前一張</button>

    <button id="next">前一張</button>

 

    <img src="tupian/1.jpg"></img>

</div>

 

</body>




采納答案:
<!--發現以下問題: 1、window.onload=fuction() 寫錯了,是function 2、<titile>picture</titile> 錯了是 <title>picture</title> 3、var img=document.getElementsByTagName("img"); js通過標簽名獲取對象是返回一個數組的,在 設置圖片路徑需要指定是數組下標img[0]=地址 4、文檔的結構不完整下面是修改好的,可以參考下--><!DOCTYPE html><html> <head> <title>picture</title> <meta charset="UTF-8"> <style type="text/css"> *{margin: 0;padding: 0; } #outer{width: 500px;margin: 50px auto; padding: 10px;background-color: burlywood;text-align: center;} </style> <script type="text/javascript"> window.onload=function(){ //獲取兩個按鈕 var prev=document.getElementById("prev"); var next=document.getElementById("next"); var index=0; var img=document.getElementsByTagName("img"); var info=document.getElementById("info"); //保存圖片路徑 var imgArr=["tupian/1.jpg","tupian/2.jpg","tupian/3.jpg","tupian/4.jpg","tupian/5.jpg"]; //兩個按鈕的響應函數 prev.onclick=function(){ index--; if(index<0){ index=imgArr.length-1; } img[0].src=imgArr[index]; info.innerHTML="一共"+imgArr.length+"張,當前第"+(index+1)+"張圖片"; } next.onclick=function(){ index++; if(index>imgArr.length-1){ index=0; } img[0].src=imgArr[index]; info.innerHTML="一共"+imgArr.length+"張,當前第"+(index+1)+"張圖片"; } } </script> </head> <body> <div id="outer"> <p id="info"></p> <button id="prev">前一張</button> <button id="next">前一張</button> <img src="tupian/1.jpg"></img> </div> </body></html>


其他答案2:

你已開啟陌生人防打擾,

版权声明:本文为[CSDN問答]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201072329137009.html