jq 美女相册案例

<h2>
    美女画廊
</h2>

<ul id="imagegallery">
    <li><a href="imgs/imags/1.jpg" title="美女A">
        <img src="imgs/imags/1-small.jpg" width="100" alt="美女1"/>
    </a></li>
    <li><a href="imgs/imags/2.jpg" title="美女B">
        <img src="imgs/imags/2-small.jpg" width="100" alt="美女2"/>
    </a></li>
    <li><a href="imgs/imags/3.jpg" title="美女C">
        <img src="imgs/imags/3-small.jpg" width="100" alt="美女3"/>
    </a></li>
    <li><a href="imgs/imags/4.jpg" title="美女D">
        <img src="imgs/imags/4-small.jpg" width="100" alt="美女4"/>
    </a></li>
</ul>

<div style="clear:both"></div>

<img id="image" src="imgs/imags/placeholder.png" alt="" width="450px"/>

<p id="des">选择一个图片</p>
<script src="jquery-1.12.4.js"></script>
<script>
    $(function () {
       $("#imagegallery a") .click(function () {
          var href=$(this).attr("href");
          $("#image").attr("src",href);
          var title=$(this).attr("title");
          $("#des").text(title);

          return false;
       });
    });
</script>