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

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

赞 (0)

相关推荐

  • jQuery 一个图片切换的插件

    jQuery 一个图片切换的插件

    以下是参数说明:  参数名称  描述  delay  图片切换速度,单位毫秒  maskOpacity  遮罩层透明度,1为不透明,0为全透明  numOpacity  数字按钮透明度,1为不透明,0为全透明  maskBgColor  遮罩层背景色  textColor  标题字体颜色  numColor  数字按钮字体颜色  numBgColor  数字按钮背景色  alterColor  数字按钮选中项字体颜色  alterBgColor  数字按钮选中项背景颜色插件代码及调用 - 插件名

  • 基于Jquery的简单图片切换效果

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascrip

  • jquery attr方法获取input的checked属性问题

    问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取的checked返回值为boolean,选中为true,否则为flase 复制代码 代码如下: <input type="checkbox" id="selectAll" onclick="checkAll()">全选 functi

  • jquery中prop()方法和attr()方法的区别浅析

    jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是un

  • JQuery页面图片切换和新闻列表滚动效果的具体实现

    JQuery页面图片切换和新闻列表滚动效果的具体实现

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"&g

  • jQuery简单实现banner图片切换

    jQuery简单实现banner图片切换

    主要运用了定时器的原理,bind,trigger应用等 复制代码 代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>banner切换实现</title>    <style type="text/css">        /*        * @description: banner切换样式 

  • jQuery .attr()和.removeAttr()方法操作元素属性示例

    今天主要和大家一起分享一下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性.大家在平时的Web页面制作中都有碰到如何动态的获取元素的属性和属性值,或者说动态的修改元素的某个(某些)属性的属性值.那么jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现: 1 .attr():jQuery中的.attr()方法让你能轻松的读取,增加或修改一个元素的属性(详情参考.attr(

  • jquery获取自定义属性(attr和prop)实例介绍

    jquery获取自定义属性(attr和prop)实例介绍

    $("form").attr("check"); $("form").prop("check"); 两种都可以,不过新版jquery推荐第二种,两个在其他方面都差不多,我发现的唯一不同就是在checkbox上的时候,需要用prop,不然IE浏览器会不兼容 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&

  • jQuery学习之prop和attr的区别示例介绍

    jQuery学习之prop和attr的区别示例介绍

    1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使

  • 一个基于jquery的图片切换效果

    一个基于jquery的图片切换效果

    下面的代码对于学习jquery的朋友是个参考html代码: 代码 复制代码 代码如下: <div class="warp" id="warp"> <img src="http://images.cnblogs.com/cnblogs_com/zhangle/252347/t_pic1.bmp" alt="" class="imgBig" /> <img src="ht

随机推荐