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


Posted in Javascript onFebruary 05, 2017

利用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一般方法介绍 入门参考
Jun 21 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
js数组的操作详解
Mar 27 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
vue中jsonp插件的使用方法示例
Sep 10 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 #Javascript
JS动态生成年份和月份实例代码
Feb 04 #Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 #Javascript
js常用DOM方法详解
Feb 04 #Javascript
JavaScript数组操作详解
Feb 04 #Javascript
jQuery使用方法
Feb 04 #Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 #Javascript
You might like
PHP的中问验证码
2006/11/25 PHP
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
php zip文件解压类代码
2009/12/02 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP多文件上传类实例
2015/03/07 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
js创建对象的方式总结
2015/01/10 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
五年级学生评语
2014/04/22 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
党员作风建设自查报告
2014/10/23 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
收入证明怎么写
2015/06/12 职场文书
关于感恩的作文
2019/08/26 职场文书