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

最新推荐文章于 2023-06-25 16:59:02 发布

小菜101

最新推荐文章于 2023-06-25 16:59:02 发布

阅读量1.4k

点赞数 2

分类专栏： jQuery javascript 文章标签： js jquery 图片切换 attr函数

本文链接：https://blog.csdn.net/github_36091081/article/details/54864262

版权

javascript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

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>

小菜101

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用jquery的attr方法一行代码实现的简单的图片切换效果

1.利用jquery的attr方法实现如下的简单的图片切换效果代码如下：图片 /* intro */ .intro { width:470px; margin-top: 40px; padding: 25px 19px; border: 1px solid #e6e6e6; background-color:
复制链接

扫一扫

专栏目录