1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7 div{
8 width: 900px;
9 height: 400px;
10 margin: 0 auto;
11 }
12 div img{
13 width: 900px;
14 height: 400px;
15 }
16 </style>
17 <script type="text/javascript">
18 function init(){
19 //隔两秒调用一次
20 // window.setTimeout(changeImg,2000);
21 //每隔两秒调用一次
22 setInterval(changeImg,2000);
23 }
24 //数组中的图片要单独在项目中创建一个文件夹用于存放
25 var pathArr=new Array(
26 "img/1.jpg",
27 "img/1.png",
28 "img/2.jpg",
29 "img/2.png"
30 );
31 var index = 0;
32 function changeImg(){
33 nextImg();
34 }
35 function preImg(){
36 myimg = document.getElementById("myimg");
37 index --;
38 if(index<0){
39 index = pathArr.length-1;
40 }
41 myimg.src = pathArr[index];
42 }
43 function nextImg(){
44 myimg = document.getElementById("myimg");
45 index ++;
46 if(index>=pathArr.length){
47 index = 0;
48 }
49 myimg.src = pathArr[index];
50 }
51 </script>
52 </head>
53 <body onload="init()">
54 <p align="center">
55 <button onclick="preImg()">上一张</button>
56 <button onclick="nextImg()">下一张</button>
57 </p>
58 <div>
59 <img src="img/1.png" id="myimg" />
60 </div>
61 </body>
62 </html>
