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

更新时间：2017年02月05日 08:35:41 作者：pluscai

这篇文章主要为大家详细介绍了用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>

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

您可能感兴趣的文章:

Javascript jquery css 写的简单进度条控件
很多的时候用户需要等待你“臃肿”的 Javascript 代码处理完成（Web 2.0 的特色）。期间或许加入一个类似于进度条的东西让用户有点“安慰”。这个东西实现起来并不复杂，无非就是获得总的处理条目，然后获得一个百分比，再显示输出。
2008-03-03
jquery表单对象属性过滤选择器实例分析
这篇文章主要介绍了jquery表单对象属性过滤选择器,实例分析了jQuery选择器的相关使用技巧,需要的朋友可以参考下
2015-05-05
Jquery实现弹性滑块滑动选择数值插件
有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。
2015-08-08
jQuery控制文本框只能输入数字和字母及使用方法
这篇文章主要介绍了jQuery控制文本框只能输入数字和字母及使用方法的相关资料，非常不错而且实用性也很高,需要的朋友可以参考下
2016-05-05
基于jquery实现的可编辑下拉框实现代码
昨天看到QQ登录的时候，可以选择以前登录过的账户，这个东西也可以在网站登录的时候用到，所以我就想做一个这样的插件；在网上查了很多，没有找到合适自己的，所以决定自动制作一个
2014-08-08
jquery zTree异步加载简单实例讲解
这篇文章主要为大家详细介绍了jquery zTree异步加载简单实例，ztree采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀，感兴趣的小伙伴们可以参考一下
2016-02-02
jquery $(this).attr $(this).val方法使用介绍
$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法，本文整理了一些相关的示例，感兴趣的朋友可以参考下
2013-10-10
jQuery实现碎片轮播效果
这篇文章主要为大家详细介绍了jQuery实现碎片轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
jquery 动态增加删除行的简单实例(推荐)
下面小编就为大家带来一篇jquery 动态增加删除行的简单实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
Jquery 的扩展方法总结
jQuery的扩展方法有两种方式，一种是jQuery本身的扩展方法，另一种是jQuery所选对象的扩展方法，下面一起来看。
2011-10-10