qq_40741909
努力成为大牛吧
采纳率0%
2021-02-24 19:22

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条回答

  • lzb820 L-zbin 2月前
    <!--
    
    发现以下问题:
    
     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>
    点赞 评论 复制链接分享

为你推荐