jQuery实现的简单焦点图特效实现过程详解
分类：实例代码
本章节分享一段代码实例，它实现了非常简单的焦点图效果。
当然为了简便，省略了图片，并且效果也并不是特别的完美，但是也能够学习到一定原理。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#slider{
position:relative;
overflow:hidden;
margin:20px auto;
height:240px;
width:740px;
padding:5px;
border:2px solid #cdcdcd;
}
#show{
position:relative;
height:240px;
width:740px;
}
#show .img{
width:740px;
height:240px;
margin-bottom:5px;
}
#num{
position:absolute;
right:5px;
top:220px;
}
#num span{
float:left;
display:block;
text-align:center;
width:20px;
height:20px;
line-height:20px;
margin:2px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:blod;
background:#f2f2f2;
border:1px solid #D78918;
color:#D78918;
}
#num .current{
color:#fff;
width:21px;
height:21px;
line-height:21px;
font-size:16px;
border:0px;
margin:0px 1px;
background-color:#FF7300;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
var count=1;
setInterval(function(){
count=count==5?0:count;
var top=-count*(240+5);
count++;
$("#show").animate({top:top},600);
$("#num").find("span").eq(count-1).addClass("current").siblings().removeClass("current");
},2000);
})
</script>
</head>
<body>
<div id="slider">
<div id="show">
<div class="img" style="background:red;"></div>
<div class="img" style="background:blue"></div>
<div class="img" style="background:gold"></div>
<div class="img" style="background:yellow"></div>
<div class="img" style="background:green"></div>
</div>
<div id="num">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
代码注释:
（1）.$(function(){})，当文档结构完全加载完毕再去执行函数中的代码。
（2）.var count=1，声明一个变量，用来进行计数的。
（3）.setInterval(function(){},2000)，定时器函数，每隔2秒执行一下指定函数。
（4）.count=count==5?0:count;，如果count等于5，那么就将其重置为0。
（5）.var top=-count*(240+5)，设置元素的top属性值，之所以实现轮播，就是不断的设置元素top值，实现隐藏和显示图片的效果。
（6）.count++，count值加1。
（7）.$("#show").animate({top:top},600)，以动画方式通过top定位元素。
（8）.$("#num").find("span").eq(count-1).addClass("current").siblings().removeClass("current"),这段代码的作用就是将对应索引的span元素添加current样式类，其他的span删除此样式类。
jQuery实现的简单焦点图特效实现过程详解，这样的场景在实际项目中还是用的比较多的，关于jQuery实现的简单焦点图特效实现过程详解就介绍到这了。
jQuery实现的简单焦点图特效实现过程详解属于前端实例代码，有关更多实例代码大家可以查看。