先了解大体结构：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>标题</title>
</head>
<body>
<img id="pic" src="index/pic1.jpg" width="690" height="350">   
</body>
</html>

大家看来应该发现了当出现“<>”后面就有</>，我们得知道这些标签里面是用来干嘛的，首先咱们就在<body></body>中写内容，我们可以直接插入一个图片<img id="pic" src="index/pic1.jpg" width="690" height="350">在这个图片的插入中我们发现有id、src、width、height，这些是img图片的一些属性，src=图片的路径(相对路径)，id是给它标记一个id号，方便后面对图片的设置，width和height图片的宽高，px像素表示。

    插入图片后我们发现图片是在左上角的，这个时候我们就要给它排版到想要的位置，怎么解决呢？

用div来引导：

给div一个class然后设置整个div的属性，把图片用ul包起来。

<div class=”test1”>
  <ul>
<img id="pic" src="index/pic1.jpg" width="690" height="350">
     <ul>
    </div>

这一步弄好再设置整个div，我们在<style></style>中设置，把style放在head后面body前面：

</head>
<style></style>  我们把它放在这里就行了
<body>
…

        在里面写简单代码：

.test1{
    position:relative;           /*把他当作母体位置*/
    width:1300px;
    height:600px;
    border:1px solid #F00;      /*给div整个框弄一个红色1像素的边框*/
    overflow:hidden;             /*把超出这个框的东西隐藏起来*/
}

这里的width:1300px;height:600px;是指div这个框的宽高了，图片在在它里面是width="690" height="350".

接着设置图片在“div“中的位置：

.test1 ul{
    position:absolute;           /*当作在母体中的子体位置*/
    width:690px;
    height:350px;
    top:150px;                  /*离母体顶部150像素的地方*/
    left:300px;                 /*离母体左边300像素的地方*/
}

这样图片的位置就放好了。

接下来我们实现轮播图片：

    要使图片自动播放就需要构造函数，咱们写函数用<script></script>放在<body>与</html>之间：

  

<script>
  var pic=document.getElementById("pic");
  var arr=new Array("index/pic1.jpg","index/pic2.jpg "," index/pic3.jpg ");
  var imgIndex=0;
  function pic_Change(){                   /*构造换图函数*/
      if(imgIndex==2){
         imgIndex=0;
         }
      else{
         imgIndex++;}
      pic.src=arr[imgIndex];          /*这里把arr[imgIndex]赋给pic中的src来改变原src的值（即原图片）*/
      }
  var picc=setInterval(pic_Change,3000); /*执行语句*/
</script>

   我们一一分析上面的部分：

第一句使用document中的getElementById抓取id为pic的数据,前面我们已经把图片的id设置成了pic，相当于我们获取了这个图片的数据，把他赋给定义的pic

第二句var一个数组arr，里面包含三张图片，路径不能错要和第一张一样的路径

第三句var 一个imgIndex=0;作为数组下标它的值变化范围可以是0、1、2

第四句构造函 function pic_Change()，里面主要写跟随imgIndex的变化，arr[imgIndex]也会跟着变化，而后pic.src也会变化即图片改变

最后一句 var picc=setInterval(pic_Change,3000);

setInterval(pic_Change,3000)里面的参数（X，Y），X代表执行的函数pic_Change，Y代表多少毫秒执行一次，这里是3000毫秒也就是3秒。

这样简单的图片轮播就做好啦。

以上的js、css等不分文件了直接写在一起因为简单，如果有错误请告知哦 

整体代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
.test1{
    position:relative;         /*  把他当作母体位置*/
    width:1300px;
    height:600px;
    border:1px solid #F00;
    overflow:hidden;
     }   
.test1 ul{
    position:absolute;           /*当作在母体中的子体位置*/
    width:690px;
    height:350px;
    top:150px;                  /*离母体顶部150像素的地方*/
    left:300px;                 /*离母体左边300像素的地方*/
}
</style>
<body>
<div class="test1">
<ul>
<img id="pic" src="实验5/images/index/pic1.jpg" width="690" height="350">
</ul>
</div>
</body>
<script>
  var pic=document.getElementById("pic");
  var arr=new Array("实验5/images/index/pic1.jpg","实验5/images/index/pic2.jpg ","实验5/images/index/pic3.jpg ");
  var imgIndex=0;
  function pic_Change(){                   /*构造换图函数*/
      if(imgIndex==2){
         imgIndex=0;
         }
      else{
         imgIndex++;}
      pic.src=arr[imgIndex];          /*这里把arr[imgIndex]赋给pic中的src来改变原src的值（即原图片）*/
      }
  var picc=setInterval(pic_Change,3000); /*执行语句*/
</script>
</html>