<head runat="server">
    <title>无标题页</title>
    <script type ="text/javascript" >
      function c1() {
          setInterval(c2,2000);
      }
      var i = 1;
      function c2()
      {
         var ou1 = document.getElementByIdx_x('img1');
         var ou2 = document.getElementByIdx_x('img2');
         var ou3 = document.getElementByIdx_x('img3');
         var ou4 = document.getElementByIdx_x('img4');
         var ou5 = document.getElementByIdx_x('img5');
         switch (i)
         {
            case 5:
              ou1.style.display ="block";
              ou2.style.display = "none";
              ou3.style.display = "none";
              ou4.style.display = "none";
              ou5.style.display = "none";
              break ;
          case 4:
              ou1.style.display = "none";
              ou2.style.display = "block";
              ou3.style.display = "none";
              ou4.style.display = "none";
              ou5.style.display = "none";
              break;
            case 3:
                ou1.style.display = "none";
                ou2.style.display = "none";
                ou3.style.display = "block";
                ou4.style.display = "none";
                ou5.style.display = "none";
                break;
            case 2:
                ou1.style.display = "none";
                ou2.style.display = "none";
                ou3.style.display = "none";
                ou4.style.display = "block";
                ou5.style.display = "none";
                break;
            case 1:
                ou1.style.display = "none";
                ou2.style.display = "none";
                ou3.style.display = "none";
                ou4.style.display = "none";
                ou5.style.display = "block";
                break;
            default:
                break;
         }
         i ++;
         if (i>5)
         {
           i =1;
         }
      }
     function changeImage(i)
     {
       var mImg = document .getElementById ('mainImage');
       mImg.src = document .getElementById (i).src;
     }
    </script>
    <style type ="text/css" >
        img
        {
         vertical-align :top ;
        }
    </style>
    
</head>
<body onload = "c1()">
    <form id="form1" runat="server">
    <div style ="width :800px; height :600px">
       <img src ="image/p1.jpg" id = "img1" style ="display:block" width ="800px"  height = "600px"/>
       <img src ="image/p2.jpg" id = "img2" style ="display:none" width ="800px"  height = "600px"/>
       <img src ="image/p3.jpg" id = "img3" style ="display:none" width ="800px"  height = "600px"/>
       <img src ="image/p4.jpg" id = "img4" style ="display:none" width ="800px"  height = "600px"/>
       <img src ="image/p5.jpg" id = "img5" style ="display:none" width ="800px"  height = "600px"/>
    </div>
    </form>
</body>
</html>

其中<img src ="image/p1.jpg" id = "img1" style ="display:block" width ="800px"  height = "600px"/>
连接的是本地的图片文件,用的是相对路径