怎么在我的一个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>

是不是数组哪里错了？