首页 > 代码库 > html幻灯效果页面

html幻灯效果页面

2024-07-04 06:39:04   230人阅读

方式一：

<!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">1</a>
      <a href="#img2">2</a>
      <a href="#img3">3</a>
      <a href="#img4">4</a>
    </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">1</label>
      <label for="img2">2</label>
      <label for="img3">3</label>
      <label for="img4">4</label>
    </div>
  </body>
</html>


联系
我们