图片数量和id顺序对应索引位置

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>素描相册</title>
  6.     <link rel="stylesheet" type="text/css" href="../css/photo.css">
  7.     <script type="text/javascript" src="jquery.js"></script>
  8.     <script type="text/javascript" src="../js/photo.js"></script>
  9. </head>
  10. <body>
  11.     <span></span><!-- 行级元素css内display: block;设置为块级元素设置宽高圆角属性 -->
  12.     <div class="avr">
  13.         <a href="#">素描1</a>
  14.         <a href="#">素描2</a>
  15.         <a href="#">素描3</a>
  16.         <a href="#">素描4</a>
  17.         <a href="#">素描5</a>
  18.         <a href="#">素描6</a>
  19.         <a href="#">素描7</a>
  20.         <a href="#">素描8</a>
  21.         <a href="#">素描9</a>
  22.     </div>
  23.     <div class="dpl">
  24.         <img src="img/1.jpg" alt="">
  25.         <img src="img/2.jpg" alt="">
  26.         <img src="img/3.jpg" alt="">
  27.         <img src="img/4.jpg" alt="">
  28.         <img src="img/5.jpg" alt="">
  29.         <img src="img/6.jpg" alt="">
  30.         <img src="img/7.jpg" alt="">
  31.         <img src="img/8.jpg" alt="">
  32.         <img src="img/9.jpg" alt="">
  33.     </div>
  34. </body>
  35. </html>