利用jquery的attr方法一行代码实现的简单的图片切换效果

来源：互联网发布：erp软件销售怎么样编辑：程序博客网时间：2024/05/21 04:20

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

1 0