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实现的简单焦点图特效实现过程详解属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容