用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 相关文章推荐
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
Area 区域实现post提交数据的js写法
Apr 22 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
值得收藏的vuejs安装教程
Nov 21 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 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简单防盗链实现方法
2015/07/29 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
javascript基本语法分析说明
2008/06/15 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
js中跨域方法原理详解
2015/07/19 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
python实现扫描日志关键字的示例
2018/04/28 Python
Python的高阶函数用法实例分析
2019/04/11 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
python中的django是做什么的
2020/07/31 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
安全员岗位职责
2013/11/11 职场文书
大学生工作求职信
2014/06/23 职场文书
妇女工作先进事迹
2014/08/17 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python