编程 Javascript

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

Posted in Javascript onFebruary 05, 2017

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

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

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

- Author -

pluscai

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 对象成员的可见性说明

Oct 16 Javascript

javascript+iframe 实现无刷新载入整页的代码

Mar 17 Javascript

基于jQuery的自动完成插件

Feb 03 Javascript

javascript实现手机震动API代码

Aug 05 Javascript

基于jquery实现二级联动效果

Mar 30 jQuery

AngularJS使用ocLazyLoad实现js延迟加载

Jul 05 Javascript

Js中async/await的执行顺序详解

Sep 22 Javascript

javaScript手机号码校验工具类PhoneUtils详解

Dec 08 Javascript

使用webpack打包koa2 框架app

Feb 02 Javascript

使用react实现手机号的数据同步显示功能的示例代码

Apr 03 Javascript

vue+axios+mock.js环境搭建的方法步骤

Aug 28 Javascript

解决vue 退出动画无效的问题

Aug 09 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