<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
????<style>
????????*{
????????????margin:?0;
????????????padding:?0;
????????}
????????a{
????????????text-decoration:?none;
????????}
????????.wrap{
????????????width:?1000px;
????????????height:?800px;
????????????background:?url(img/bg.jpg)?no-repeat;
????????????position:?absolute;
????????????left:?50%;
????????????top:?50%;
????????????margin-left:?-500px;
????????????margin-top:?-400px;
????????}
????????#prev,#next{
????????????position:?absolute;
????????????width:?25px;
????????????height:?45px;
????????????background:?url(img/ar.png)?no-repeat;
????????????top:?155px;
????????}
????????#prev{
????????????left:?13px;
????????}
????????#next{
????????????transform:?rotate(180deg);
????????????right:?13px;
????????}
????????.pic{
????????????width:?536px;
????????????height:?356px;
????????????position:?absolute;
????????????top:?170px;
????????????left:?297px;
????????}
????????img{
????????????vertical-align:?top;
????????????width:?536px;
????????????height:?356px;
????????}
????????#txt{
????????????width:?536px;
????????????height:?71px;
????????????position:?absolute;
????????????left:?297px;
????????????bottom:?185px;
????????????text-align:?center;
????????????font:?20px/71px?"微軟雅黑";
????????????color:?#666;
????????}
????</style>
</head>
<body>
???<div?class="wrap">
???????<div?class="pic">
????????????<img?id="img"?src="img/1.jpg"?alt="">
???????</div>
???????<p?id="txt">這是第?<span>1</span>?張圖片</p>
???</div>
???<script>
???????var?pic?=?document.querySelector('img');
???????var?imgs?=?['img/1.jpg',?'img/2.jpg',?'img/3.jpg',?'img/4.jpg',?'img/5.jpg'];
???????var?num?=?0;?
???????setInterval(function(){
???????????num++;
???????????if(num?>=?imgs.length){
????????????????num?=?0;
???????????}
???????????pic.src?=?imgs[num];
???????},1000)
???</script>
</body>
</html>
