利用jquery的attr方法一行代码实现的简单的图片切换效果

简介: 利用jquery的attr方法一行代码实现的简单的图片切换效果

利用jquery的attr方法一行代码实现的简单的图片切换效果



1.利用jquery的attr方法实现如下的简单的图片切换效果


20170204165833071.png


代码如下:


<!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>


目录
相关文章
|
1月前
|
JavaScript
jQuery幸运大转盘抽奖活动代码
jQuery幸运大转盘抽奖活动代码
33 7
jQuery幸运大转盘抽奖活动代码
|
3月前
|
JavaScript
jQuery追加节点方法 和height方法与width方法
jQuery追加节点方法 和height方法与width方法
|
3月前
|
JavaScript 前端开发
调用jQuery的animate()方法无法移动的问题
调用jQuery的animate()方法无法移动的问题
|
3月前
|
JavaScript 前端开发 UED
jQuery 自动刷新页面但不闪烁的实现方法
jQuery 自动刷新页面但不闪烁的实现方法
|
4月前
|
JavaScript 前端开发
jQuery学习(十二)—jQuery中对象的查找方法总结
jQuery学习(十二)—jQuery中对象的查找方法总结
|
4月前
|
JavaScript
jQuery学习(九)—常用的包裹方法
jQuery学习(九)—常用的包裹方法
|
4月前
|
JavaScript
jQuery学习(七)— append方法与appendTo方法
jQuery学习(七)— append方法与appendTo方法
|
4月前
|
JavaScript
jQuery学习(八)—before方法、after方法、insertBefore方法、insertAfter方法
jQuery学习(八)—before方法、after方法、insertBefore方法、insertAfter方法
|
3月前
|
JavaScript 前端开发
jquery酷炫的马赛克图片还原动画代码
jquery酷炫的马赛克图片还原动画代码,jquery马赛克图片动画,js酷炫图片代码,马赛克图片js还原效果,js图片分散汇聚效果素材
41 1
|
1天前
|
JavaScript CDN
jQuery方法小记
jQuery方法小记
11 0