jquery带缩略图的相册案例分享-来自于三人行慕课

原文链接：https://www.3mooc.com/front/articleinfo/194

我们在网上经常看到类似下图这种的缩略图相册，其实这个效果用jquery很好实现，主要是熟悉attr()这个方法就好了。

首先我们要先布局html和css

HTML部分：

<h2>

  三人行慕课免费赠送课程列表

</h2>

<ul id="imagegallery">

  <li><a href="images/11.jpg" title="HTML5/CSS3">

    <img src="images/11-small.jpg" width="100" alt=""/>

  </a></li>

  <li><a href="images/22.jpg" title="jquery">

    <img src="images/22-small.jpg" width="100" alt=""/>

  </a></li>

  <li><a href="images/33.jpg" title="javaScript">

    <img src="images/33-small.jpg" width="100" alt=""/>

  </a></li>

  <li><a href="images/44.jpg" title="Vue">

    <img src="images/44-small.jpg" width="100" alt=""/>

  </a></li>

</ul>

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

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

<p id="des">选择一个图片</p>

/*css部分*/

<style type="text/css">

    body {

      font-family: "Helvetica", "Arial", serif;

      color: #333;

      background-color: #ccc;

      margin: 1em 10%;

    }

    h1 {

      color: #333;

      background-color: transparent;

    }

    a {

      color: #c60;

      background-color: transparent;

      font-weight: bold;

      text-decoration: none;

    }

    ul {

      padding: 0;

    }

    li {

      float: left;

      padding: 1em;

      list-style: none;

    }

    #imagegallery {

      list-style: none;

    }

    #imagegallery li {

      margin: 0px 20px 20px 0px;

      padding: 0px;

      display: inline;

    }

    #imagegallery li a img {

      border: 0;

    }

  </style>

注意设置好图片的title和href属性，我们需要用jq获取和更改属性

jquery代码部分：

script src="images/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>

用jquery实现这个效果就是这么简单。