这篇文章主要介绍如何使用Jquery的attr方法实现图片切换效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！利用jquery的attr方法实现如下简单的图片切换效果代码如下：&l
这篇文章主要介绍如何使用Jquery的attr方法实现图片切换效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
利用jquery的attr方法实现如下简单的图片切换效果
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片</title>
<script src="js/jquery.min.js"></script>
<style>
.intro
{
width:470px;
margin-top: 40px;
padding: 25px 19px;
border: 1px solid #e6e6e6;
background-color: #fff;
}
.intro .pic-selector
{
height: 256px;
}
.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方法实现图片切换效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网node.js频道！
--结束END--
本文标题: 如何使用jquery的attr方法实现图片切换效果
本文链接: https://www.lsjlt.com/news/68655.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0