用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的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
vue.js实例todoList项目
Jul 07 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
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 date函数参数详解
2006/11/27 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
python使用pil生成图片验证码的方法
2015/05/08 Python
python实用代码片段收集贴
2015/06/03 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
django 简单实现登录验证给你
2019/11/06 Python
Python3列表List入门知识附实例
2020/02/09 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
一些高难度的SQL面试题
2016/11/29 面试题
护士节演讲稿开场白
2014/08/25 职场文书
学习十八大演讲稿
2014/09/15 职场文书
七年级地理教学计划
2015/01/22 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL