定时器轮播效果帮忙解决一下？

实现效果点击按钮开始图片在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  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 () {
			img.src=arr[n]
			n++
			n=n%arr.length
		}
		obtn2.onclick=function  () {
		clearInterval(timer)
		}
	</script>
	

	
	</body>

</html>

CSS 样式尽量写在head上，写行内样式，看起来很乱，而且增加代码量

其实没什么问题，就是你函数那里直接img修改图片路径

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

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

    <style>
        div {
            width: 200px;
            height: 200px;
            border:10px double ;
        }
        #pic {
            width : 100%;
            height : 100%;
        }
    </style>

</head>

<body>
<input type="button" id="btn1" value="开始" />
<input type="button" id="btn2" value="暂停" />
<div>
    <img src="images/02.jpg" id="pic">
</div>

<script type="text/javascript">
    const oBtn1=document.getElementById("btn1")
    const oBtn2=document.getElementById("btn2")
    const oPic=document.getElementById("pic")

    var n=0
    var timer=null
    var arr=["images/02.jpg","images/03.jpg"]
    oBtn1.onclick=function  () {
        //clearInterval(timer);
        timer = setInterval(aa, 1000);
    }
    function aa () {
        //img.src=arr[n] // 这里不能直接img
        oPic.src = arr[n];
        n++;
        n=n%arr.length;
    }
    oBtn2.onclick=function  () {
        clearInterval(timer)
    }
</script>



</body>

</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

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.src = arr[n]

n++

n = n % arr.length

}

obtn2.onclick = function () {

clearInterval(timer)

}

</script>

</body>