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

最新推荐文章于 2022-05-08 11:09:14 发布

原创最新推荐文章于 2022-05-08 11:09:14 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #jquery #图片切换 #attr函数

javascript 同时被 2 个专栏收录

14 篇文章

订阅专栏

jQuery

6 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单图片切换效果。通过鼠标悬停在不同的小预览图上，可以改变显示的大图内容。该效果包括了基本的样式设置及jQuery代码实现。

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>