怎么在我的一个div盒子里面放图片实现轮播效果，我的不知道哪里错了

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<title>背景</title>
		
	</head>

	<body>
<input type="button" id="btn2" value="开始" />
	<input type="button" id="btn2" value="暂停" />
	<div id="pic" style="width: 200px; height: 200px; border:10px double ;"></div>
	<script type="text/javascript">
		var obtn1=document.getElementById("btn1")
		var obtn2=document.getElementById("btn2")
		var opic=document.getElementById("pic")
		var n=0
		var timer=null
		var arr=["兔子.jpg","狗狗.jpg"]
		obtn1.onclick=function  () {
			clearInterval(timer)
			timer=setInterval(aa,1000)
		}
		function aa () {
			opic.img.src=arr[n]
			n++
			n=n%arr.length
		}
		obtn2.onclick=function  () {
		clearInterval(timer)
	</script>
	

	
	</body>

</html>

是不是数组哪里错了？

20行代码和26行是不是错了

<input type="button" id="btn2" value="开始" />
   <input type="button" id="btn2" value="暂停" />
   <div style=" width: 200px; height: 200px;border:10px double ;">
       <img src="兔子.jpg"/ width="100%" height="100%" id="pic"></div>
   <script type="text/javascript">
       var obtn1=document.getElementById("btn1")
       var obtn2=document.getElementById("btn2")
       var opic=document.getElementById("pic")
       var n=0
       var timer=null
       var arr=["兔子.jpg","狗狗.jpg"]
       obtn1.onclick=function () {
           clearInterval(timer)
           timer=setInterval(aa,1000)
       }
       function aa () {
           opic.img.src=arr[n]
           n++
           n=n%arr.length
       }
       obtn2.onclick=function () {
       clearInterval(timer)
       }
   </script>