主页 / 网络编程 /

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

网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要为大家详细介绍了用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-: 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-:0px; 
        } 
         
    .intro .pic-selector ul li 
        { 
         width: 80px; 
         height: 60px; 
         overflow: hidden; 
         margin-: 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-: 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>

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

上一篇：jQuery实现最简单实用的分秒倒计时 下一篇：JavaScript编写九九乘法表（两种任选）

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by