html幻灯效果页面

DOCTYPE HTML>
html>
  head>
  style>
 
  #cont {
  position: relative;
  height: 300px;
  }
img {
      position: absolute;
      width: 400px;
      height: 300px;
      z-index: 1;
    }
img:first-child,
img:target {
      z-index: 2;
    }

#pag {
    width:400px;
}
 
  style>
  head>
  body>
  div id="cont">
      img id="img1" src="images/1.JPG">
      img id="img2" src="images/2.JPG">
      img id="img3" src="images/3.JPG">
      img id="img4" src="images/4.JPG">
    div>
    div id="pag" align="center">
      a href="#img1">1a>
      a href="#img2">2a>
      a href="#img3">3a>
      a href="#img4">4a>
    div>
  body>
html>

doctype html>
html>
  head>
    style>
    img {
      display: none;
      width: 400px;
      height: 300px;
    }
 
    input:checked + img {
      display: block;
    }
 
    input {
      position: absolute;
      left: -9999px;
    }
 
    label {
      cursor: pointer;
    }
    #pag{
        width:400px;
    }
    style>
  head>
  body>
    div id="cont">
      input id="img1" name="img" type="radio" checked="checked">
      img src="images/1.JPG">
      input id="img2" name="img" type="radio">
      img src="images/2.JPG">
      input id="img3" name="img" type="radio" checked="checked">
      img src="images/3.JPG">
      input id="img4" name="img" type="radio">
      img src="images/4.JPG">
    div>
    div id="pag" align="center">
      label for="img1">1label>
      label for="img2">2label>
      label for="img3">3label>
      label for="img4">4label>
    div>
  body>
html>