用jquery的attr方法实现图片切换效果
更新时间：2017年02月05日 08:35:41 作者：pluscai
这篇文章主要为大家详细介绍了用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-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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天总结一下学习jQuery时中遇到的一些常用的jQuery代码，这些代码片段可能在我们急需的时候能起到帮助。2011-07-07
这篇文章主要介绍了jQuery中scrollLeft()方法用法,实例分析了scrollLeft()方法的功能、定义及获取或设置匹配元素相对滚动条左侧的偏移(offset)量时的使用技巧,需要的朋友可以参考下2015-01-01
系统默认情况下，使用Tab按键切换页面元素的焦点，有没有想过回车键Enter也可以实现这种功能，并且具有良好的用户体验2014-05-05
这篇文章主要为大家详细介绍了jquery 实现列表上移、下移功能的相关资料，感兴趣的小伙伴们可以参考一下2016-02-02
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
这篇文章主要介绍了jQuery通过控制节点实现仅在前台通过get方法完成参数传递的功能,实例分析了jQuery操作节点的技巧与控制前台get方法传递参数的用法,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
本教程将分步讲解如何使用JQuery和CSS打造一个炫酷动感菜单。2010-04-04
这篇文章主要为大家详细介绍了jQuery实现嵌套选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
jQuery ajax 当async为false时解决同步操作失败的问题
这篇文章主要介绍了 jQuery ajax 当async为false时解决同步操作失败的问题的相关资料,需要的朋友可以参考下2016-11-11
本文主要介绍了jquery实现文本框的禁用和启用，代码清晰，有需要的朋友可以参考下，希望会对大家有所帮助2016-12-12
这篇文章主要为大家详细介绍了基于jQuery实现Ajax验证用户名是否存在实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
最新评论