用jquery的attr方法实现图片切换效果

利用jquery的attr方法实现如下简单的图片切换效果，希望大家喜欢

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>图片</title>
  <script src="js/jquery.min.js"></script>
  <style>
    /* intro */
    .intro
    {
     width:470px;
     margin-top: 40px;
     padding: 25px 19px;
     border: 1px solid #e6e6e6;
     background-color: #fff;
    } 

    .intro .pic-selector
    {
    /* width: 430px;*/
     height: 256px;
     /* float: left;*/
    } 

    .intro .pic-selector .pic
    {
     width: 341px;
     height: 256px;
     overflow: hidden;
     float: left;
    } 

    .intro .pic-selector .pic img
    {
     width:100%;
     height:100%;
    } 

    .intro .pic-selector ul
        {
         width: 73px;
         float: left;
         margin-left: 5px;
         margin-top:0px;
        } 

    .intro .pic-selector ul li
        {
         width: 80px;
         height: 60px;
         overflow: hidden;
         margin-top: 5px;
         cursor: pointer;
         opacity: 0.5;
        }
    .intro .pic-selector ul li img{
      width:100%;
      height:100%;
    } 

    .intro .pic-selector ul li.active
        {
         opacity: 1;
        } 

    .intro .pic-selector ul li:first-child
  {
   margin-top: 0px;
  }
  </style>
</head>
<body>
  <div class="intro">
    <div class="pic-selector">
     <div class="pic"><img class="cover-size" src="img/0204_1.jpg" /></div>
     <ul>
      <li class="active"><img class="cover-size" src="img/0204_1.jpg" /></li>
      <li><img class="cover-size" src="img/0204_2.jpg" /></li>
      <li><img class="cover-size" src="img/0204_3.jpg" /></li>
      <li><img class="cover-size" src="img/0204_4.jpg" /></li>
     </ul>
    </div>
   </div>
   <script>
    $(function(){
      // pic selector
       $('.intro .pic-selector ul li').hover(function () {
        $('.intro .pic-selector ul li').removeClass('active');
        $(this).addClass('active');
        $('.intro .pic-selector .pic img').attr('src', $(this).children('img').attr('src'));
//       makeImageCoverSize();
       });
    })
   </script>
</body>
</html> 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。