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

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>

  • 写回答

2条回答 默认 最新

  • L-zbin 2021-02-24 20:29
    关注
    <!--

发现以下问题：

 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>
    评论

报告相同问题？

悬赏问题

  • ¥15 急matlab编程仿真二阶震荡系统
  • ¥20 TEC-9的数据通路实验
  • ¥15 ue5 .3之前好好的现在只要是激活关卡就会崩溃
  • ¥50 MATLAB实现圆柱体容器内球形颗粒堆积
  • ¥15 python如何将动态的多个子列表，拼接后进行集合的交集
  • ¥20 vitis-ai量化基于pytorch框架下的yolov5模型
  • ¥15 如何实现H5在QQ平台上的二次分享卡片效果？
  • ¥15 python爬取bilibili校园招聘网站
  • ¥30 求解达问题（有红包）
  • ¥15 请解包一个pak文件